Projektuj Animacje UI z Lottie Files i After Effects: Preview animacji w sekcji Hero
w Praktyce
6 godz. 18 min · After Effects · Grafika motion i 3D
Michał WedlechowiczCzego się nauczysz
- Wprowadzenie do Lottie
- Przykłady animacji na stronach
- Wprowadzenie do After Effects
- Import plików do aftera
- Praca z timelinem
- Pierwsze projekty i kompozycje
- Instalacja pluginu Lottie
- Przygotowanie plików w Adobe Illustrator
- Konwertowanie warstw na ścieżki
- Podstawowe właściwości warstw w After Effects
- Transformacje ścieżek na osi czasu
- Dopuszczalne efekty dla Lottie
- Usuwanie błędów i niepotrzebnych warstw
- Graph Editor
- Optymalizacja wagi pliku
- Eksport do formatu dotLottie
- Import do Webflow
- Dodawanie interakcji i animacji
Konfiguracja i poznanie After Effects
Wystartujemy z wprowadzeniem do After Effects. Poznamy podstawowe funkcje programu, przygotujemy i zaciągniemy do niego pierwsze materiały i zaczniemy wprawiać je w ruch pracując na ścieżkach wektorowych. Zainstalujemy plugin Lottie i skonfigurujemy swoje konto w serwisie Lottie FIles, abyśmy mogli eksportować tam nasze animacje i pobierać je w formatach dotLottie albo JSON.
Praktyczny projekt z After Effects
W drugim rozdziale zaczniemy pracować nad docelowym projektem. Poznasz te funkcje Aftera, które będą istotne dla przygotowania plików Lottie. Poznasz też ograniczenia i najczęstsze problemy, oraz dowiesz się jak sobie z nimi radzić i jak optymalizować pliki importowane do After Effects. Dowiesz się też jakich narzędzi wolno używać, a które nie są wspierane przez format Lottie. Jeżeli natomiast pracujesz już z motion designem i znasz bardzo dobrze After Effects, to dzięki temu szkoleniu będziesz wiedział jak wykorzystać swoje umiejętności na zupełnie nowym polu, jakim jest animacja na potrzeby interfejsów.
Dopracowanie projektów i praca z Lottie w Webflow
Ostatni rozdział kursu to dopracowanie projektu w najmniejszych szczegółach i praca ze ścieżkami wektorowymi oraz z ich animacją. Usuniemy niepotrzebne elementy w kompozycjach i zadbamy o optymalizację pliku oraz o jego wagę. Postaramy się, żeby jego waga oscylowała w granicach od kilkudziesięciu do maksymalnie kilkuset kilobajtów, aby nie obciążać strony internetowej. Dodatkowo zaimportujemy nasz Lottie do Webflow, abyśmy mogli zobaczyć jak w praktyce będzie działała nasza animacja i w jakie interakcje możemy z nią wchodzić.
Zaawansowana animacja z Lottie
Jednym z praktycznych projektów jaki stworzymy w trakcie kursu będzie Bardzo zaawansowana animacja postaci oparta na ruchu węzłów wektorowych. Do stworzenia projektu wystarczą nam podstawowe funkcje Aftera. W kursie dowiesz się, że projektując animację pod Lottie nie możemy korzystać z bardziej złożonych narzędzi After Effects, ponieważ mogą nie być one wspierane przez format Lottie czy JSON. Przejdziemy przez listę funkcjonalności, które możemy stosować, a których lepiej unikać, aby mieć pewność, że nasze animacje będą wyświetlać się prawidłowo na wielu różnych platformach.
Dla kogo jest ten kurs?
Materiał szkoleniowy, to zbiór lekcji wideo, poukładanych w odpowiednich rozdziałach i podzielonych na części tematyczne. Został opracowany z myślą o: projektantach graficznych, UI designerach, motion designerach. Wszystkie lekcje przygotowane są tak, aby osoby początkujące mogły nauczyć się podstaw animacji obsługi After Effects. Natomiast osoby posiadające już doświadczenie z animacją dowiedzą się jak wykorzystać swoją wiedzę dla tworzenia animacji i interakcji w dziedzinach związanych z Digital Designem. Kto jeszcze może skorzystać na wiedzy zawartej w tym kursie? Graficy pracujący w zawodzie od lat - doświadczeni graficy będą mogli wykorzystać swoją wiedzę na zupełnie innym polu, jakim jest motion. Dowiedzą się jak działa After Effects, oraz jak eksportować poprawne pliki Lottie, niezawierające błędów. Zyskają nowe perspektywy i umiejętności, które pozwolą im wyróżnić się na konkurencyjnym rynku pracy. Freelancerzy pracujący zdalnie dla dużych agencji reklamowych - dla nich materiał to droga do poznania nowych technik pracy i wykorzystania swojej wiedzy na zupełnie innych polach, co przełożyć się może na otrzymywanie bardziej zróżnicowanych zleceń i lepsze zarobki.
OK.
Nasza animacja wyświetla się poprawnie, tak jak już widzieliśmy
w lekcji poprzedniej.
Natomiast chciałbym pokazać Ci kilka rzeczy związanych z
ustawieniami w Web Flow.
Jeszcze nie będziemy przechodzić do interakcji, ale chciałbym zostawić to
jako swego rodzaju wisienkę na torcie.
Ale na pewno to o czym będziemy musieli porozmawiać
to dodatkowe opcje, które tutaj mamy.
Warto zwrócić uwagę na to, że w momencie kiedy to wszystko już się zadzieje,
to nasza animacja się zatrzymuje.
Czyli mamy już ostatnie wiadomości.
OK.
I animacja się zatrzymała.
Nic już się tutaj dalej nie dzieje.
I w zasadzie mogłoby tak być.
Ale ja chciałbym, żeby ona np.
działała w pętli, więc możemy przejść do Design Mode i.
Web powie, że to jest animacja i możemy np.
przejść do ustawień tej animacji wybierając ikonkę z trybikiem,
albo ewentualnie przejść do.
Settings.
I mamy tutaj dokładnie te same te same rzeczy.
Do ustawienia mamy ilość ilość klatek.
Jak długo trwa animacja?
Możemy sobie włączyć preview tutaj bezpośrednio nie musimy przechodzić do
Preview Mode, żeby podejrzeć całą stronę.
Widzimy tutaj też postęp animacji.
I.
No i możemy sobie włączyć właśnie zapętlenie za pomocą tutaj tego checkbox
lub Teraz nasza animacja będzie działać w pętli, czyli w momencie kiedy się skończy
to zacznie się od początku raz jeszcze.
I tak w kółko, w kółko, w kółko.
Mam tutaj jeszcze renderowanie i tutaj zalecam, żebyśmy skupili się na SVG
Canvas troszeczkę lepiej działa na performance, czyli na
szybkość ładowania strony itd.
Natomiast nie wspiera.
Może nie wspierać wszystkich funkcjonalności jakie
dodaliśmy do naszego pliku LOD.
Jest takie ryzyko, dlatego ja raczej zostawiam swoje.
Nasze pliki i tak są leciutkie jak piórko, więc nie ma się czym czym przejmować.
Możemy tutaj. Możemy tutaj np.
wpisać 30 sekund i teraz nasza animacja będzie działać szybciej.
Albo np. 20 jeszcze wtedy bardziej przyśpieszy.
Jeśli jednak chcemy użyć tej oryginalnej prędkości, wystarczy, że
włączymy checkbox Use built in duration i wtedy mamy 40 sekund.
OK, sprawdźmy czy animacja faktycznie działa w pętli.
Tak jest. Widzimy, że rozpoczęła się odnowa.
Znowu mamy odliczanie od pierwszego procenta aż do aż do stu.
OK. Klikam, aby zatrzymać odtwarzanie.
Możemy sobie oczywiście podejrzeć znowu tutaj w trybie
preview jak wygląda nasza strona.
No i cóż, to na razie wszystko, jeśli chodzi o umieszczanie plików
melodii w sekcjach Web Flow.
Natomiast tutaj jeszcze mam dla Ciebie kolejną
animację, którą zaprojektujemy sobie również w After Effects i wrzucimy ją do
Web Flow, ale dodatkowo jeszcze dodamy do niej interakcję.
A jeśli chodzi o naszą animację, którą nad którą pracowaliśmy do tej pory i którą
właśnie oglądamy, to w zasadzie już wszystko, bo
wykonaliśmy kawał świetnej roboty.
Prezentuje się ona bardzo ładnie.
A teraz przechodzimy do kolejnego projektu.