Projektuj Animacje UI z Lottie Files i After Effects: Animacja Chatu

0:00OK.

0:00No to działamy teraz z kolejną kompozycją, która związana jest z konwersacją

0:04między użytkownikiem a czat botem.

0:07I teraz jak to wygląda?

0:09Mamy tutaj pierwszą wiadomość, która powinna się wyświetlić.

0:13Tutaj jest kolejna.

0:14Tutaj jest druga wiadomość, którą wpisuje użytkownik i kolejna wiadomość

0:20od sztucznej inteligencji.

0:22Trzecia wiadomość, którą wpisuje użytkownik.

0:24I tutaj jest ostatnia wiadomość od bota.

0:27I teraz jak ja rozłożyłem to na warstwach w ilustratorzy.

0:31Każda wiadomość, każdą wiadomość w zasadzie zbudowałem z background u.

0:37Czyli tutaj mamy message i jeden background.

0:40Następnie mamy Message 1, czyli warstwę, na której jest tekst i message 1

0:45warstwa, na której jest awatar.

0:47I tak w zasadzie zbudowana jest każda kolejna wiadomość, natomiast tutaj

0:52mamy troszeczkę więcej rzeczy. Message 2.

0:54Message 2 Background czyli ten panel, na którym pojawi się wiadomość.

0:58Mamy tutaj kolejny element Message 2, czyli

1:04tą pierwszą informację Message 2, drugą informację i Message 2, trzecią

1:10informację, no i oczywiście awatar jako osobna warstwa itd itd.

1:14I będziemy dzięki temu, że rozbiłem sobie to w ten sposób na warstwy, każda warstwa

1:18naturalnie jest podpisana, to będzie nam wygodnie z tym pracować w Operze.

1:24Przechodzimy więc do aplikacji Adobe After Effects i tutaj importujemy

1:28sobie ten dokument.

1:29Dlatego naturalnie wybieram File Import File i jest to conversation.

1:37Wklejamy to.

1:38Importujemy to jako kompozycję z zachowaniem rozmiarów warstw.

1:41Dokładnie w ten sposób w sposób jak zazwyczaj klikam tutaj.

1:44No i mamy już.

1:48Pierwsze elementy, tak i teraz chciałbym oczywiście animować też

1:53ten tekst, żeby on się tutaj wpisywał jak z klawiatury, więc pojawia się tutaj.

2:01Myślę, że tych, tych background ów każdej wiadomości nie będziemy animować.

2:07Na pewno powinien nam się pojawić tutaj ten awatar, więc możemy sobie

2:13już skopiować klatki kluczowe.

2:16Na przykład skąd tutaj możemy skopiować fajną klatkę kluczową właśnie np.

2:23chociażby z tej kompozycji tutaj, gdzie pojawiają się te poszczególne

2:30elementy, np.

2:32tutaj klatki kluczowe będą w porządku Command.

2:37C Przechodzimy do kompozycji Conversation

2:41Command V i fajnie nam wskakuje tutaj ten avatar.

2:45Avatarów naturalnie nie będziemy zamieniać na wektory, bo to są bitmapy.

2:48Nie da się takiego wektorowego zdjęcia uzyskać.

2:52Natomiast jeśli chodzi o ten tekst tutaj mamy kłopot, bo musimy

2:56pracować tutaj z aktywnym tekstem.

3:00Tutaj mamy pewien problem, bo tak jak rozmawialiśmy w poprzedniej lekcji, musimy

3:04tutaj stworzyć tekst taki aktywny, a później zamienić

3:09go na ścieżki wektorowe i animować.

3:12Wartość opacity dla każdej z literek.

3:15Jest to czasochłonne. Niestety jest to czasochłonne.

3:18Niestety, ale da nam bardzo fajny efekt i ograniczymy się tutaj do wpisywania z

3:23klawiatury tylko tych wiadomości od użytkownika.

3:25Natomiast czat bot będzie nam zwracał wiadomości w całości.

3:30Nie będzie nam tutaj pokazywał jak się to wszystko wpisywało.

3:35Więc przejdziemy sobie może tutaj do firmy.

3:38I tutaj mamy pierwszą wiadomość od użytkownika.

3:43Ja sobie ten tekst po prostu skopiuję.

3:44Prawy prawy klawisz myszy Copy as tekst OK i przechodzimy do after.

3:49A tutaj ustawiam sobie kursor Command V i mamy to wklejone.

3:56Myślę, że możemy sobie tutaj zmniejszyć troszeczkę do dwudziestu siedmiu.

4:03W porządku kolor.

4:04Niech to będzie kolor biały.

4:07OK, tutaj musimy sobie.

4:14Ustawić to w ten sposób, czyli dać enter i to powinno powędrować tutaj.

4:23Spróbujmy tutaj dać 28.

4:28OK.

4:29I teraz tą oryginalną warstwę usuwamy. Mamy.

4:35Tekstową.

4:38Warstwę I teraz zamienimy ją na kształty wektorowe.

4:42I teraz pojawia się pytanie a dlaczego nie zamienić tej warstwy z Illustratora?

4:48Ponieważ Illustrator takie litery traktuje bardzo dziwnie, tzn.

4:54stwarza z tych liter, zwłaszcza z takich, które mają otwory w środku, jak np.

4:58litera p albo litera o stwarza z nich tzw.

5:02ścieżki złożone, więc będziemy mieli masę tutaj niepotrzebnych elementów, takich

5:06jak dodatkowe grupy w grupach i masę tzw. merge path.

5:12Stwarza to spory problem, bo musimy bardzo dużo elementów usunąć, co oczywiście

5:17wpłynie niekorzystnie na czas pracy nad takim LOD.

5:21I dlatego ja wolę sobie tutaj napisać ten tekst jako warstwę tekstową i

5:27zamienić ją na ścieżki wektorowe.

5:29Ten oryginalny tekst usuwamy.

5:32Włączamy tą naszą warstwę tekstową, którą teraz stworzyliśmy.

5:35I tu wybieram naturalnie prawy klawisz myszy Create shape from text

5:42i ten oryginalny tekst mogę usunąć.

5:45To co jest tutaj fajne to w momencie kiedy rozwiniemy content to mamy

5:48każdą literę osobno i.

5:54Z każdą z tych liter możemy pracować osobno.

5:56Widzimy, że.

6:05Widzimy, że kiedy rozwiniemy taką literę, to nie mamy tutaj dodatkowej grupy.

6:08Mamy niestety match path, które będziemy musieli usunąć, ale nie mamy dodatkowych

6:13grup w grupach, które musimy usuwać.

6:15Jeżeli ja sobie tutaj zaznaczę tę warstwę i wpiszę sobie Merge path,

6:20to mamy owszem kilka tych miechów do usunięcia, więc po prostu sobie je

6:24zaznaczymy z wciśniętym klawiszem Command lub Ctrl na Macu i klawiszem Backspace

6:32albo Delete możemy je usunąć.

6:42I to wszystko.

6:43I co teraz robimy? Zaznaczmy sobie nasz.

6:48Naszą warstwę i to, co ja chciałbym zrobić, to odnaleźć tutaj tzw.

6:53opacity, czyli wpisujemy opacity.

6:57I teraz widzimy, że wyświetliło nam się opacity dla

7:00każdej z grup, dla każdej z liter.

7:01Dla litery P mamy opacity, dla obrysu, opacity dla wypełnienia i opacity dla.

7:09Całej litery.

7:10Dla całej grupy Natomiast jest to dosyć skomplikowane odnaleźć tutaj

7:17w tych wszystkich stop oczach to właściwe opacity przy transform.

7:22Dlatego ja proponuję, żebyśmy sobie to wyłączyli.

7:25Robimy sobie jeszcze raz content naszej grupy i zaznaczmy sobie wszystkie

7:31te grupy kształtów wektorowych za pomocą klawisza skrótów klawiaturowych

7:36Command a lub Control a.

7:38I teraz zrobimy taką rzecz.

7:42Jeżeli ja tutaj ustawię sobie na pierwszej sekundzie Play Head i rozwinę sobie.

7:50Zawartość grupy dla litery P, a następnie rozwinę.

7:53Transform to mogę ustawić Stop poczta Opacity.

7:58I mamy tutaj klatkę kluczową.

7:59Warto zwrócić uwagę, że teraz kiedy zostały zaznaczone wszystkie grupy, to do

8:03wszystkich tych grup zostało została dodana klatka kluczowa dla Opacity,

8:07więc znacznie skraca to naszą pracę.

8:10Teraz przesunę się jedną klatkę w lewo i tu dla Opacity ustawię 0.

8:16I teraz każda z liter, każda grupa wektorowa, która tworzy nam literę,

8:21otrzymała dwie takie same klatki kluczowe dla Opacity.

8:25Możemy się o tym przekonać w bardzo prosty sposób.

8:28Zaznaczam naszą warstwę, a następnie wybieram ul na klawiaturze i widzimy, że

8:33dla wszystkich grup wektorowych, zarówno dla tej, która tworzy literę P,

8:38L, E, A, S itd.

8:41Zostały utworzone dwie klatki kluczowe jedna z opacity ustawionym na 0, a

8:45druga z opacity ustawionym na 100%.

8:49I teraz wystarczy, że sobie po prostu będziemy przesuwać te

8:52klatki kluczowe w czasie.

8:57W ten sposób jest to troszeczkę czasochłonne, ale pokażę Ci fajny sposób.

9:12Zaznaczmy sobie wszystkie te klatki kluczowe tutaj.

9:15Przesuniemy je. Przesuniemy je sobie tutaj.

9:17Na początek ok.

9:24I teraz przytrzymując klawisz Shift odznaczamy sobie klatki kluczowe dla

9:27litery P, czyli dla tej pierwszej.

9:29Następnie przesuwamy to o jedną klatkę do przodu.

9:32Odznaczamy, przesuwam, odznaczamy, przesuwam, odznaczamy,

9:37przesuwam, odznaczamy.

9:40I znowu te klatki kluczowe przesuwamy o jedną klatkę do przodu z

9:45Shift em odznaczamy kolejne.

10:19No i ok, zobaczmy jak się to animuje.

10:29Wygląda bardzo fajnie, Trwało to troszeczkę, ale efekt dało nam bardzo,

10:33bardzo fajny, dlatego myślę, że warto z tego skorzystać.

10:38Natomiast teraz przejdziemy do lekcji następnej, w której pokażę Ci co

10:41zrobić dalej z taką konwersacją.

10:43A no teraz to wszystko w tej lekcji.

10:45Do usłyszenia po przerwie.