Projektuj Animacje UI z Lottie Files i After Effects: Animacja kursora
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.
Cześć, Witam Cię w kolejnej lekcji.
Zajmiemy się teraz ekranem głównym.
Jest to plik Illustratora o nazwie Empty, a ja już załadowałem go do After Effects.
Pozmieniałem te warstwy, które trzeba na wektory.
Oczywiście pominąłem te avatary to muszą zostać bitmapy, ale mamy tutaj też jeszcze
taką warstwę glow i zastanawiam się czy ją tutaj zostawić,
czy ewentualnie odtworzyć ją w formie shape wektorowego z gradientem, co
oczywiście możemy zrobić wybierając Layer New, a następnie
Shape Layer i na tej warstwie wybierzemy sobie narzędzie Elipsa.
Ona jest schowana pod Reg Tangle Tool, więc wybieram przymierze.
Klawisz myszy, wybieram Elipsa, wybieramy elipsę i narysuję tutaj z Shift
em i z wciśniętym klawiszem Command taką elipsę.
Ona ma tutaj jakieś wypełnienie gradientu, z którego wcześniej ja korzystałem.
Natomiast jeżeli będzie to wypełnienie płaskie, bo tak może być,
czyli będzie ono wyglądać w ten sposób, to po prostu przechodzimy tutaj do tego
panelu kontrolnego, wybieramy Fill, a następnie przełączamy
się na Radiant Gradient.
Wybieram przycisk OK i teraz mamy taki gradient ratalny.
Przechodzimy tutaj i możemy np.
w tym miejscu tutaj u góry pracować opacity.
Czyli jeśli opacity ustawione jest na 100%, to jakby ten kolor niebieski tutaj w
tym przypadku w całości zakrywa to co znajduje się pod spodem.
Tutaj mam opacity ustawione na 0, ale też mogę ustawić na 100 i widzimy, że
ten ciemniejszy kolor niebieski tutaj zakrywa też wszystko.
Ale skupmy się teraz na kolorach.
Myślę, że możemy tutaj zastosować taki kolor.
Ten sobie usuniemy, więc możemy po prostu ściągnąć w dół ten próbnik
z kolorem z rampy gradientu.
Wystarczy, że za niego chwytamy i przeciągamy w dół i jego już nie ma.
Tutaj mamy taki kolor niebieski to chciałbym żeby był właśnie taki.
Taki fiolet jak np. na tym przycisku.
Więc znowu przechodzimy tutaj.
Klikam na ten próbnik z kolorem na rampie gradientu, wybieram krokomierz i np
zapuszczam sobie kolor stąd i wybieram przycisk OK.
Natomiast teraz wybieram narzędzie Selection Tool i mogę np sobie
rozciągnąć ten gradient w ten sposób.
Tutaj nie widzimy wielkiej różnicy to te kolory są podobne, ale np.
jeżeli tutaj ja opacity ustawię na 0 to widzimy, że wygląda to już w ten sposób.
I za pomocą tych manipulacji manipulatorów mogę sobie tutaj rozciągać tym gradientem.
Teraz może po prostu spłaszczyć ten obiekt i odwrócimy go tutaj.
W porządku. Następnie dajmy go tu, gdzie jest glob.
Ten glob oryginalny sobie usuniemy.
I mamy taką warstwę kształtu.
Możemy ją troszeczkę powiększyć.
O, niech sobie tutaj delikatnie wystaje.
Nie jest to oczywiście obiekt wektorowy.
Możemy ewentualnie zmienić jego nazwę.
więc zaznaczam warstwę, wybieram Enter.
Następnie wpiszemy sobie tutaj gradient.
Glow, a ten oryginalną, oryginalną warstwę z ilustratora po prostu usuniemy.
I teraz zaoszczędziliśmy trochę wagi tego pliku, bo wcześniej to
była bitmap, a ten oryginalny.
Ten oryginalny plik.
Ta oryginalna warstwa Illustratora to jest bitmapy i ona na pewno w jakimś stopniu by
zwiększała wagę samego pliku ulotki.
Dlatego lepiej będzie, jeśli zastosujemy warstwę wektorową Shape wektorowy z
gradientem gradient owym wypełnieniem, a to sobie po prostu usuniemy.
No i co teraz?
Chciałbym, żeby cała animacja zaczęła się od wyboru asystenta AI.
Czyli w momencie, kiedy pojawi nam się kursor, to chciałabym, żeby ten kursor
nacisnął na tę miniaturkę z avatarem i po tym naciśnięciu wyjedzie nam tutaj.
Wyjedzie nam tutaj ta kompozycja ze wszystkimi asystentami.
Więc tutaj chyba ograniczymy się w zasadzie tylko do tego, żeby
kliknąć ikonkę To jest avatar mini, to jest ta warstwa.
Command plus Przybliżam się tutaj, wybieram S na skali
i po prostu sobie klikniemy tę ikonkę.
Natomiast żeby zaoszczędzić sobie czasu to możemy zapożyczyć klatki kluczowe już z
innej, z innej warstwy, którą ani mówiliśmy w podobny sposób.
I mam tutaj na myśli na przykład ten avatar zapożyczył sobie te klatki
kluczowe, które tutaj sterują tym klikiem.
O właśnie Command C przechodzimy do tej kompozycji i tutaj
może powiedzmy w pierwszej sekundzie ok.
Dla skali wybieram Command V a.
I tak to wygląda.
I teraz możemy sobie to zmontować, czyli stworzymy sobie nową kompozycję.
Zapiszmy zresztą najpierw zmiany.
Wybieram composite in new Composite.
I taki rozmiar kompozycji myślę, że będzie w porządku.
Nazwiemy to.
Alias is main.
Animation.
Czas trwania troszeczkę wydłużyć np. do minuty.
Wybieram przycisk OK. Minuta 20 sekund.
Na razie niech to zostanie.
Wybieram przycisk OK.
No i tutaj wrzucamy kompozycję Empty.
OK, jak to ma wyglądać?
Widzimy, że pojawia się ten klik tutaj gdzieś przy pierwszej sekundzie.
Tak więc w momencie kiedy ten klik się pojawi, to powinna rozwinąć się nam
lista z asystentami, więc tą kompozycję też sobie tutaj wrzucimy.
I musimy ją tak ustawić, żeby ona wysunęła się w momencie, kiedy następuje klik.
Czyli to sobie ustawmy tu klik o klik i wysuwa się.
Lista z awatarami. Może troszeczkę ją opóźniły jeszcze.
Super!
Widzimy, że tutaj następuje klik i wysuwa się lista za fotelami.
KLIK. O znowu.
I teraz, w momencie kiedy już wybierzemy kursor, wybierze awatara,
to ta lista powinna się schować do góry.
Czyli wybieram P i całą tą kompozycję przeniosę sobie do góry, czyli np.
przestaw mi się na ósmą sekundę i pojedźmy sobie z tym wyżej.
Tutaj oczywiście klawisz F9 i Function.
W porządku.
Tutaj może jednak będzie lepiej, jeśli przejdziemy do Graph Editor, a
upewniam się, że pracuje z prędkością.
I zrobimy coś takiego.
A.
Więc zobaczmy. Czy to nie jest w ogóle za późno.
Od kliku, czyli od wyboru avatara.
OK, myślę, że w porządku.
Czyli wybieramy avatar.
Tutaj następuje klik i cała kompozycja nam ucieka.
I teraz byłoby fajnie, gdybyśmy zaczęli coś wpisywać.
Czyli tutaj chciałbym, żeby użytkownik wpisał sobie komendę albo żeby kursor
tutaj po prostu najechał i pojawi nam się nowa kompozycja, czyli drop down menu.
To jest to!
Widzimy, że jest to troszeczkę małe, ale to nie jest większy problem.
Możemy to powiększyć np.
zwiększając do 130.
To chyba jeszcze troszkę za mało.
160 Spróbujmy. 160.
Teraz troszeczkę za dużo.
Chciałbym, żeby mniej więcej tak krawędź i ta oraz tutaj po prawej
stronie, żeby one się zrównały.
Więc wpiszmy sobie 158.
157.
O w ten sposób ja to powiększyłem i widzimy, że jest to
teraz troszeczkę takie rozmyte, ale pamiętajmy, że są to kształty
wektorowe i możemy to wykorzystać.
Wystarczy, że w tej warstwie z kompozycją drop down menu
przejdziemy w to miejsce i wybierzemy sobie.
I.
Klikniemy sobie tutaj tą ikonkę ze słoneczkiem.
Widzimy, że teraz zostało to wyostrzone.
Spójrzmy jeszcze raz wyłączam.
Widzimy, że te napisy są teraz rozmyte, a jak włączę tę ikonkę ze słoneczkiem,
to widzimy, że wszystko jest tutaj idealnie odwzorowane, bardzo ostre i
dokładnie o coś takiego nam chodziło.
Kiedy teraz ma się pojawić to drop down menu?
W momencie kiedy wybierzemy już avatara, to chciałbym, żeby kursor przejechał tutaj
na to miejsce, gdzie się wpisuje wiadomość.
I.
To się powinno pojawić teraz.
Pyk i tu.
Dobrze by było, żeby nam się to schowało.
A w jaki sposób może nam się schować ta kompozycja?
Możemy wybrać te na klawiaturze oraz z Shift MP i będziemy
animować pozycję i Opacity.
Czyli w momencie kiedy użytkownik wybierze już akcje na tym drop down menu.
Cofnijmy się tutaj na osi czasu.
Ciach!
To tutaj chciałbym, żeby to nam się schowało.
Czyli np.
możemy zjechać tym na dół i dodatkowo zmniejszyć opacity do zera.
Troszeczkę za wolno, prawda?
Więc musimy tutaj skrócić odstęp między tymi klatkami kluczowymi.
No i naturalnie, żeby ruch był bardziej przyjazny, to wybierzmy sobie leasing.
OK.
Jeszcze Jeszcze popracujemy z prędkością pozycji i tu może zrobimy coś takiego.
Teraz wygląda to dużo lepiej.
Widzimy, że teraz ten panel jak już schodzi na dół to zaczyna przyśpieszać.
W ten sposób.
Fajnie.
No i zobaczmy to, co mamy w zasadzie już teraz zrobione.
Super!
Może to jest dobry moment, żeby dodać kursor?
Ja tutaj w ilustratorzy przygotowałem sobie taki kursor.
Wybierzmy file, a następnie open.
I tutaj w setach mam taki plik o nazwie kursor.
To jest bardzo prosta wektorowa wektorowa ilustracja.
Jedna warstwą możemy ją właśnie nazwać kursor.
OK, zapiszmy sobie i za.
Ciągniemy to do after a.
Wyjdźmy może z Graph Editor.
Wybieram. Wybieram File, a następnie Import File.
Będzie to kursor.
Tak naprawdę nie musimy tutaj tego importować tak jak wcześniej.
Jako kompozycję z zachowaniem rozmiarów warstw, bo tutaj mamy tylko jedną warstwę,
więc możemy zaimportować to jako footage.
Bez tworzenia kompozycji. Wybieram open.
następnie wybieram ok.
Tutaj After pyta mnie czy wszystkie opcje warstwy skleić w jedną warstwę.
Wybieram przycisk OK. Tak jest.
No i mamy nasz kursor.
Od razu ten kursor możemy zamienić na kształt wektorowy na warstwę wektorową.
Żeby to nie było zaimportowane jako bitmap, a punkt odniesienia ustawiam
tutaj na samym czubku tego kursora.
Natomiast wybieram teraz prawy klawisz myszy Create.
Tutaj dla przypomnienia może.
Wyciągnę ten panel i create Mamy tutaj na dole Create shape from Vector Layers.
OK.
Wydaje mi się, że tutaj ten kursor został zamieniony w taki
sposób, że nie musimy nic usuwać, żadnych elementów, niepotrzebnych elementów.
Ale zaraz to sprawdzimy.
A dlaczego tak mi się wydaje?
Ponieważ jeżeli zamieniamy warstwę z Illustratora na Shape, czyli na warstwę
wektorową w eterze, to jeżeli pojawi nam się jeszcze dodatkowy
dodatkowa ścieżka wektorowa tutaj na krawędziach kompozycji.
To znaczy, że są tutaj elementy, które trzeba usunąć.
A widzę, że tutaj się to nie pojawiło, więc podejrzewam, że jeśli
przejdziemy do content, to.
Nie będzie.
Nie będziemy mieli tutaj dodatkowych zagnieżdżonych grup.
I tak właśnie jest.
Mamy natomiast Match Path i to trzeba będzie usunąć match.
OK. Usuniemy tutaj i tutaj.
To nie będzie nam do niczego potrzebne.
OK, i teraz zobaczmy, co możemy z tym kursorem zrobić.
Na pewno będziemy animować jego pozycję, więc wybieram stop loss dla pozycji.
I tutaj w momencie kiedy następuje klik to dobrze by było, żeby ten kursor już
tutaj był, czyli gdzieś mniej więcej przed pierwszą sekundą, bo klik
następuje w pierwszej sekundzie.
Czyli tu byłoby świetnie, gdyby ten kursor się przeniósł właśnie w to miejsce.
KLIK.
I on się tutaj powinien zatrzymać do momentu, aż pojawią się avatary.
Tutaj mamy damy nową klatkę kluczową.
Także tu, w tym miejscu się nic nie dzieje.
Nie zachodzi żadna zmiana w wartościach pozycji.
I tu, kiedy już pojawia się ten efekt hover, to chciałbym, żeby kursor
najechał na tego awatara alias.
I potem ten kursor powinien sobie przejechać.
Tu tu, bo widzimy, że już Hoover pojawia się na tym drugim avatarze.
Potem powinien sobie przejechać tutaj.
Potem powinien sobie przejechać tutaj.
Ok.
I powinien w końcu wylądować na tym ostatnim.
I tutaj następuje klik.
OK.
Tutaj możemy ustawić nową klatkę kluczową z taką samą wartością
dla pozycji jak tutaj.
Więc tu widzimy, że nic się nie dzieje z kursorem.
Następuje klik.
I teraz, kiedy pojawia się tutaj ten drop down menu, to chciałbym, żeby kursor
znajdował się w tym miejscu.
A.
Bo chciałbym, żeby kliknął na Send message.
I teraz.
Zobaczmy jak to wygląda.
Ten ruch kursora jest totalnie nienaturalny.
Więc będziemy musieli tutaj dodać guzik do tych klatek.
Dlatego zaznaczmy je w całości Function i F9.
Zobaczmy teraz.
OK, tutaj ten ruch.
Stąd dotąd jest troszeczkę za szybki, więc spróbujmy zrobić tak, że tą
klatkę kluczową przesuniemy tutaj.
I to samo zrobimy z tym drop down menu.
To drop down. Menu jeszcze sobie opuścimy troszkę.
No i tutaj też musimy wprawić nasz kursor w ruch.
Czyli w tym miejscu stawiamy kolejną klatkę kluczową.
Ona ma dokładnie taką samą wartość jak ta klatka kluczowa, czyli tu się
nic nie dzieje z naszym kursorem.
Natomiast w tym miejscu chciałabym, żeby on już się przeniósł na
tą pierwszą pozycję, na drop down menu.
Tu powinien się przenieść na kolejną pozycję.
Tu już powinien wylądować ten kursor tutaj.
Następnie tu.
I finalnie ląduje nam.
Tu.
Super!
To na co jeszcze warto zwrócić uwagę to jedna według mnie dosyć istotna rzecz.
W momencie kiedy nasz użytkownik na animacji wybiera sobie
tego awatara o nazwie Ava.
I klika go następnie to mi się chowa.
To tutaj już powinniśmy mieć ten nowy awatar, prawda?
I myślę, że tym zajmiemy się w lekcji następnej.
Zapiszmy zmiany na teraz to wszystko.
Zapraszam Cię na krótką przerwę.