Projektuj Animacje UI z Lottie Files i After Effects: Lottie - przykłady

0:00Hej, cześć, witam serdecznie.

0:01Z tej strony Michał Lachowicz zw.

0:03PL, A w tej lekcji będę chciał pokazać Ci kilka bardzo fajnych przykładów

0:07wykorzystania animacji LOT i w tym momencie jesteśmy na stronie LOT Files

0:12Kropka com i już tutaj możemy zobaczyć w sekcji Hero bardzo płynną animację.

0:19Z takimi ikonkami, które są przyciągane przez magnes.

0:22Ta animacja waży zaledwie kilkanaście KB i jest ona lekka dlatego, że jest

0:29stworzona z shape wektorowych kształtów.

0:32Co nie znaczy, że nie możemy takich animacji projektować z wykorzystaniem

0:36bitmap, jednak należy pamiętać, żeby ważyły one odpowiednio niewiele.

0:43Kiedy przejdziemy sobie przez całą stronę LOD I Files, przez cały główny

0:48landing page, zobaczymy tutaj całą masę bardzo fajnych przykładów takich animacji.

0:54Zarówno takich ikonograficznych czy bardziej ilustracyjne.

0:58Widzimy przykłady.

0:59Mamy tutaj GIF, który waży 320 KB, a do melodii tylko 6 KB.

1:04W przypadku takiej prostej, prostej animacji, ale również animacji

1:09mogą być bardziej złożone, np.

1:13jeśli przejdziemy na główną stronę firmy, to zobaczymy tutaj bardzo fajną animację,

1:19która pokazuje interfejs Sigmy oraz różne kursory, które układają

1:25elementy budując interfejsy itd.

1:28I to już jest bardziej rozbudowana animacja.

1:30To jest również animacja LOD i podobne animacje

1:36miałem przyjemność wykonywać i one ważą troszeczkę więcej, bo ok.

1:40Mogą ważyć z racji ilości wektorów mogą one ważyć około 200 KB, ale

1:45to i tak jest mniej niż np.

1:47jakiś rozbudowany GIF, który w tym przypadku byłby bardzo,

1:51bardzo ciężki czy czy jakaś MP czwórka.

1:55Kiedy przesuniemy się niżej, na stronie Sigmy też możemy

2:01zobaczyć podobną animację, która pokazuje właśnie

2:06różne kursory, które wykonują operacje mające na celu zaprojektowanie interfejsu.

2:14I tutaj również podobna animacja.

2:19Podobne rozwiązanie możemy znaleźć na głównej stronie

2:23reklam, gdzie tutaj też możemy zobaczyć jak różne kursory układają sobie

2:31strony internetowe z komponentów.

2:33To jest bardzo fajna, miękka animacja.

2:35Bardzo ładnie się to wszystko tutaj animuje.

2:38Z takim fajnym over rzutem też jest to lod bardzo lekki.

2:45Więc na stronie m. in.

2:49też znajdziemy bardzo fajne przykłady.

2:51Kolejny przykład to np.

2:54strona Bozon Protocol Yo.

2:57Tutaj też w sekcji Hero znajdziemy bardzo fajną, bardzo fajną animację wektorową

3:03zbudowaną właśnie za pomocą lotki.

3:07Warto zwrócić uwagę na to, że te animacje są bardzo, bardzo płynne.

3:12One działają tak, jakby miały z 60, a nawet 100 klatek na sekundę.

3:17Bardzo.

3:18Są naprawdę bardzo, bardzo płynne, o czym się przekonamy.

3:21Nawet jeżeli projektując taką animację w aplikacji Adobe After Effects ustawimy

3:25sobie tylko 24 klatki na sekundę czy 25, to i tak te animacje będą odtwarzane

3:30przez przeglądarkę bardzo, bardzo płynnie.

3:35Jest to świetny przykład animacji loty na stronie Events Service.

3:40I taką też znajdziemy.

3:42Bardzo fajne animowane kafelki.

3:43Musimy tylko przenieść się nieco niżej.

3:46I tu widzimy jak pojawiają się poszczególne elementy.

3:51Bardzo fajnie to wygląda.

3:52Możemy zobaczyć tutaj.

3:53Też w momencie kiedy scroll to po scroll pojawia nam się kolejna

3:57animacja, wyskakują kolejne elementy z bardzo fajnym efektem

4:01overload i to samo możemy zobaczyć. Dalej.

4:07Też bardzo fajny przykład wykorzystania lotu.

4:11Następnie strona Hubble net też ma bardzo fajną animację w sekcji Hero.

4:16Dosyć taką ilustracją z fajnym okapem interfejsu Na stronie Knorr w Kropka com

4:23też znajdziemy dosyć delikatną animację w sekcji Hero.

4:29Tutaj jeśli przeniesiemy się niżej też są kolejne animacje.

4:33Ta np.

4:33jest w takim fajnym rzucie izometrycznym, ale jest bardzo minimalistyczna

4:38i też możemy zobaczyć jak płynnie się to wszystko porusza z takim

4:41bardzo fajnym leasingiem.

4:47Tutaj kolejna prosta animacja.

4:54Przejdźmy teraz na stronę VIP Profit.

4:59I tutaj, w sekcji Hiro też możemy zobaczyć już nieco bardziej złożoną

5:02i bogatszą w ruch animację z bardzo fajnym Morning em kształtów wektorowych.

5:09To też moim zdaniem jest bardzo, bardzo fajny przykład.

5:14Przenieśmy się niżej i zobaczmy czy jeszcze coś jest.

5:17Tutaj są też bardzo fajne minimalistyczne ikonki, też animowane za

5:21pomocą formatu do lotu.

5:23Jeżeli natomiast przeniesiemy się niżej, tutaj możemy zobaczyć

5:27animację interfejsu, która.

5:32Jest dosyć kiepskiej jakości.

5:37Mamy tutaj bardzo mocno skompresowane bitmapy.

5:42Możemy zrobić dokładnie to samo, dokładnie taki sam.

5:47Taką samą animację, ale za pomocą LOD i wykorzystując wektorowe kasety tego

5:53interfejsu po prostu animuje je w aplikacji Adobe After Effects.

5:59Dzięki temu wszystkie te elementy będą wyglądały jak mocno wyostrzone, wysokiej

6:03jakości wektory, dokładnie tak jak tu czy tutaj, a nie jak za

6:08mocno skompresowane bitmapy.

6:10Dlatego do takich animacji polecam właśnie LOT files.

6:15Dokładnie, mamy tutaj animowany interfejs, tak jak widzieliśmy to na stronie

6:18produktowej firmy, czyli np. zobaczmy tutaj.

6:24Wygląda to znacznie lepiej jeśli chodzi o jakość.

6:36Ale prawdziwą wisienką na torcie jest strona Duolingo Kropka com, gdzie mamy

6:40całą masę na landing page, całą masę świetnych ilustracji.

6:45Loty, które są w pełni wektorowe ważą naprawdę niewiele i wszystkie

6:53działają bardzo płynnie.

6:54Są bardzo miękkie, ruch jest przemyślany.

6:59Widzimy w każdej sekcji nową animację i tak naprawdę te animacje też są

7:04wykorzystywane w samej aplikacji Dual Link, która służy do nauki języków obcych.

7:09Przejdźmy dalej. Tutaj też świetna animacja.

7:13Na samym końcu jest animacja, która jest w pewien sposób interaktywna,

7:18ponieważ reaguje na scroll użytkownika.

7:20Zaraz do niej przejdziemy.

7:23Tutaj mamy kolejne, kolejną sekcję.

7:27I teraz przechodzimy do animacji, która reaguje na scroll.

7:32Zwróćmy uwagę, co się dzieje tutaj z postaciami.

7:36Kiedy ja zaczynam królować, widzimy, że tutaj taki misiek wyszedł z telefonu.

7:43I w momencie, kiedy będę z królową, on przyleci do tego telefonu.

7:47OK.

7:48Widzimy, że teraz też pojawia się kolejna postać.

7:50Kiedy zatrzymałem Scroll, nic się nie dzieje.

7:54Natomiast kiedy zacznę królować pojawia się kolejna postać.

7:57Wylatuje z kolejnego telefonu i zatrzymuje scroll i również zatrzymuje się postać.

8:03Kiedy znowu zacznę z królować, postacie dalej się ruszają i widzimy,

8:08że tutaj znowu coś się zaczęło dziać.

8:11Zatrzymuję scroll, zatrzymuje się animacja, Rozpoczynam scroll.

8:16Animacja.

8:19Rozpoczyna też swój ruch.

8:21Zwróćmy uwagę, że kiedy przewijam do góry, to animacja odtwarza się od tyłu.

8:31Świetne rozwiązanie, bardzo mi się podoba.

8:37No i ok.

8:39To jest.

8:41To już jest bardziej zaawansowany przykład animacji lotni.

8:45Strona Duolingo kropka.

8:46COM Bardzo często zaglądam na nią, ponieważ ten ruch, który jest tutaj

8:50zaprojektowany jest świetny i jest idealny do inspiracji.

8:57A cóż, ja myślę, że w tej lekcji to już wszystko.

9:02Widzieliśmy sporo fajnych przykładów wykorzystania takich animacji.

9:07One działają naprawdę fajnie i no cóż, nie pozostaje nam nic

9:12innego jak stworzyć coś podobnego.

9:15Tutaj zwróćmy uwagę, że kiedy zajeżdżam na Get Started, ta sofa z telefonu zaczyna

9:20wyskakiwać, a kiedy zjadę kursorem.

9:25To widzimy, że sofa się zatrzymuje.

9:28OK.

9:29To chyba jest na tej stronie Duolingo najfajniejsze.

9:32Najfajniejsza sekcja.

9:34No ale cóż, w tej lekcji to wszystko.

9:37Przechodzimy teraz do lekcji następnej, dlatego zapraszam Cię na krótką przerwę.