Projektuj Animacje UI z Lottie Files i After Effects: Preview i finalizacja
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.
Wiemy już jak dodawać animacje, loty, jak osadzać je w projektach stron
internetowych w Web Flow.
A jeśli nie korzystasz z Web Flow, być może chciałbyś dowiedzieć, jak można
to zrobić w alternatywny sposób, np.
za pomocą HTMLa.
Chciałbym pokazać Ci to na bazie naszej animacji Alias.
I np.
mam tutaj taki prosty landing, gdzie chciałbym podmienić ten obrazek w sekcji
Hero na właśnie nasz mock aplikacji animowany.
Jak możemy to zrobić?
Zobacz przychodzę tutaj do tej animacji i po prawej stronie.
Jeśli przeniosę się do.
Sekcji head off i amp, mogę upewnić się.
Że mam włączone włączone dopuszczanie tej animacji do
osadzania na stronach internetowych, w innych mediach itd.
I mamy tutaj zwróć uwagę bezpośredni link do naszej animacji i również możemy
osadzić fragment kodu HTML odpowiedzialny za naszą animację.
Możemy go po prostu skopiować, albo ewentualnie wybrać sobie
Custom X i tutaj np.
możemy sobie zwiększyć.
Prędkość tej animacji np.
dwukrotnie możemy włączyć sobie auto play Play tak żeby nasza animacja odtworzyła
się od razu po załadowaniu strony.
Możemy sobie włączyć lub i ewentualnie możemy sobie do playera dodać.
Controls czyli przyciski, które pozwolą nam odtworzyć i
zatrzymać animację oraz suwak z linią czasu.
Tego akurat nie chcę, więc możemy sobie to wyłączyć.
Mamy też rozmiary naszej animacji.
Tło Na razie sobie to zostawmy.
Zobacz, mam tutaj.
Nasz kod i on jest w zasadzie podzielony na dwa fragmenty.
Pierwszy to fragment, który uruchamia czy w
zasadzie osadza na stronie player melodii, czyli taki odtwarzacz,
dzięki któremu możemy uruchamiać nasze animacje.
Jeśli ja przejdę tutaj, to widzimy, że ten krótki kod jest mniej więcej
skonstruowany tak samo.
Mamy nasz skrypt, który uruchamia bloki player.
Możemy sobie zarówno skopiować to jak i np.
to tutaj stąd.
I jeśli ja wybiorę teraz Command C to wkleję sobie ten lot i player właśnie
w miejsce gdzie znajduje się nasz obrazek.
Przejdę więc do West Coast i tutaj nasz obrazek jest.
Niżej. Tutaj mamy w Bar menu.
OK, tu jest nasz obrazek.
Hero Image jest to obrazek PNG.
Mamy tutaj znacznik image, więc ja po prostu sobie zaznaczę to.
OK.
Mamy tutaj też klasę, która formatuje ten obraz, więc może tej klasy nie
będziemy usuwać na razie przynajmniej.
Wybieram Command i wybieram Command V. W porządku.
Mamy tutaj już dodany skrypt, który uruchamia nam player.
Natomiast musimy teraz dodać content do tego playera, czyli tą naszą animację.
Więc kopiujemy sobie drugi fragment kodu.
Zaczynający się od DoD i Player Source czyli źródło.
Zaznaczam to wybieram Command C, następnie wracam do West Code
i tutaj wybieramy Enter Command V i mamy tutaj wrzucone nasze źródło animacji,
które będzie uruchamiane w playerze.
Natomiast widzimy, że tutaj mamy styl wpływ 300 pikseli height 300 pikseli.
Nie chcemy, żeby nasza animacja wyglądała w ten sposób.
Dlatego skorzystamy z tej klasy, która tutaj jest, która była i
oscylowała nasz obrazek.
Wybierzmy sobie Command X, a następnie usuniemy to
domyślny styl i wybieram Command V.
W porządku.
I teraz zapiszmy sobie Command s, a następnie wracam do przeglądarki i
odświeżę sobie mój projekt strony.
No i super!
Widzimy, że wszystko działa, odtwarza się bardzo dobrze.
Znajduje się również na odpowiednim miejscu i dokładnie o
coś takiego mi chodziło.
Możemy wrócić do kod i np tutaj speed ustawić powiedzmy na 2 s.
Wracam do przeglądarki i odświeżam stronę.
I teraz animacja będzie działać dużo szybciej, w zasadzie dwa razy szybciej.
OK. No i działa.
Ponadto jeżeli przejdziemy do strony Load I Files.
Do Landing page to możemy przejść do Integration i np.
jeśli pracujesz powiedzmy ze Word WordPressem,
możemy wybrać sobie Explore All.
I znajdziesz tutaj.
Dedykowane pluginy do różnych platform czy aplikacji np.
takich jak WordPress, które pozwolą Ci osadzić tą animację, tą czy inną
jakąkolwiek inną animację lotu właśnie na Twoich projektach stron.
Również np.
w Bubble, który też ostatnio jest dosyć popularny jeśli chodzi o budowanie
serwisów internetowych za pomocą technologi Now code albo low code.
OK. I to w zasadzie wszystko w tej lekcji.
Jak widzisz tych możliwości jest tutaj więcej, bo np.
możemy osadzić taką animację za pomocą MB URL albo iframe czy np.
skorzystać z pluginów, które pozwolą pozwolą nam na interakcję właśnie np.
ze wspomnianym Bublem czy WordPressem.
A teraz to wszystko w tej lekcji.
Serdecznie zapraszam Cię na lekcję następną oczywiście po krótkiej przerwie.