Projektuj Animacje UI z Lottie Files i After Effects: Animacja Czatu cz - 2

0:00W porządku, pracujemy dalej.

0:01Nasz tekst wpisuje się bardzo fajnie, ale myślę, że to nie jest to pole, w

0:06którym on się powinien wpisywać.

0:08Pole, w którym użytkownik powinien wpisywać tekst to jest dokładnie.

0:16To pole.

0:17Czyli w momencie kiedy wpisał komendę slash C pojawiła się lista, wybrał sobie

0:23akcję to kursor tu powinien zejść tak jak teraz i powinien użytkownik

0:28w tym miejscu wpisywać tekst.

0:31Jak to możemy zrobić?

0:32Przede wszystkim przejdźmy do tej konwersacji z.

0:36Kopiemy sobie tę warstwę animowaną z tekstem, którą stworzyliśmy

0:40sobie w lekcji poprzedniej.

0:41Ten tekst bardzo fajnie się wpisuje.

0:44Wróćmy do.

0:47Tej kompozycji Empty I tu chciałbym, żeby ten tekst się nam wpisywał.

0:52Command V Wklejamy sobie tę warstwę tutaj.

0:55Przenieśmy ją w to miejsce.

0:57Odnajdziemy ją sobie gdzieś tu. Ona jest.

1:00Gdzie ten tekst się wpisuje w tym miejscu? OK?

1:03Przenieśmy to niżej naturalnie, czyli w odpowiednie miejsce do

1:06odpowiedniego panelu, czyli tutaj.

1:09I teraz ważna rzecz.

1:11Oczywiście ten slash C powinien nam zniknąć.

1:14Tak więc.

1:18Myślę, że tutaj możemy sobie.

1:27Wybrać klawisz T.

1:28Będziemy sterować Opacity.

1:33OK. I tutaj niech nam to zniknie.

1:36Porządku. I teraz użytkownik zaczyna wpisywać tekst.

1:42OK. Tutaj mamy pewien problem, bo widzimy, że.

1:50Pojawia się druga linijka wiadomości, która troszeczkę nachodzi

1:53tutaj na te ikonki. Co możemy z tym zrobić?

1:55Możemy z animować powiększanie się tego panelu.

1:59Więc myślę, że w momencie kiedy tutaj pojawiają się ostatnie litery pierwszego

2:06wiersza, to rozpoczniemy animację rozszerzania się tego panelu.

2:11Ustawmy sobie tutaj marker na tej warstwie z tekstem.

2:15Możemy wybrać marker sad marker.

2:18Ten tekst może niech będzie w kolorze żółtym, żeby nam się odznaczał ładnie.

2:24Odnajdziemy teraz tę warstwę oraz tą.

2:28I na tych warstwach są ścieżki, które ja chciałbym animować.

2:33Więc wybieramy content.

2:36To jest ta grupa tutaj path rozwijam, klikam na stop, łącz przy path i

2:41będziemy animować PATH, czyli ścieżkę wektorową.

2:45Przejdziemy kilka klatek do przodu, zaznaczymy sobie

2:49odpowiednie węzły, przeniesiemy te węzły np.

2:52tutaj. W porządku.

2:54Teraz to samo zrobimy z tym Message Bar.

2:57Tutaj też mamy.

3:00Content i wybierzmy sobie odpowiednią grupę wektorową.

3:04To pewnie będzie ta ostatnia.

3:06Tak, jest Path.

3:08Tutaj się cofniemy. W porządku.

3:11Klikam na Stop Watch i mamy pierwszą klatkę kluczową dla ścieżki.

3:15Przesuniemy się o kilka klatek do przodu.

3:18OK i chwytam za te dwa węzły u góry, a następnie podnoszę to w ten sposób

3:24i w tym samym momencie, kiedy podnosi się ten panel.

3:27Tak naprawdę byłoby fajnie, gdyby podniósł się też ten tekst tutaj.

3:33Widzę, że.

3:37W tym miejscu mamy jeszcze jedną rzecz, którą trzeba by animować, czyli ten obrys.

3:41Pas, ok.

3:44I ten pas powinien wrócić na swoje miejsce, czyli tutaj ok.

3:52Bardzo fajnie, więc ustawiam pakiet na początku animacji tego kontenera.

3:58Następnie zaznaczam nasz tekst.

4:00Wybieram PE na klawiaturze, ponieważ będę sterował pozycją

4:04i w momencie kiedy ten kontener tutaj się rozszerzy rozszerzył, to nasz tekst

4:11powinien powędrować do góry w ten sposób.

4:18Czyli wygląda to tak.

4:22I teraz może nie aż tak wysoko.

4:26A tutaj dodajmy.

4:29Teraz zaznaczmy te klatki kluczowe, które odpowiadają za ten ruch i

4:32dodajmy tutaj using function F9.

4:39No i teraz wygląda to fajnie.

4:43Co dalej? Kiedy użytkownik skończył pisać wiadomość?

4:45Byłoby fajnie, gdyby ta wiadomość wyskoczyła tutaj jako taki

4:49pop up, czyli mam tutaj na myśli tę kompozycję z konwersacją.

4:56Tutaj będziemy musieli usunąć klatki kluczowe, które odpowiadają nam za

5:00animację tego tekstu, ponieważ nie jest to miejsce, w którym chciałbym

5:02animować nasz tekst.

5:04Dlatego wybierzmy na klawiaturze zaznaczy wszystkie klatki kluczowe, które

5:08odpowiadają za animację tego tekstu.

5:12Okay, a następnie wybieram Backspace albo delete na klawiaturze.

5:21I teraz już ten tekst się nie animuje.

5:24Pojawia nam się tylko awatar.

5:25Tak naprawdę ten tekst może też niech tak samo fajnie awansuje, ale zmienimy

5:30punkt odniesienia, punkt odniesienia np.

5:33ustawimy sobie tutaj.

5:34Przypominam, że aby wybrać narzędzie Anchor Points

5:37wybieramy klawisz Y na klawiaturze, albo ewentualnie mamy u góry

5:43w panelu kontrolnym.

5:44Teraz wybieram narzędzie Selection Tool i pożyczymy sobie chyba ten efekt,

5:50ten efekt pojawiania się.

5:52Stąd pożyczymy sobie te klatki kluczowe z tego avatara Command C

5:57i wklejamy je do tekstu Command V.

5:59Tylko troszeczkę ten tekst opóźniły o coś takiego.

6:08OK.

6:10Więc teraz wracamy do Empty.

6:13W momencie kiedy użytkownik skończył to pisać, no to właśnie ten popup powinien

6:19pojawiać się tutaj z wiadomością i z jego miniaturką.

6:23Dlatego na pewno też ten kontener musi wrócić do swojego pierwotnego kształtu.

6:27Tak więc proponuję, żebyśmy tutaj sobie

6:30zaznaczyli klatki kluczowe w tym kontenerze oraz oraz tutaj.

6:37OK, żebyśmy mieli więcej miejsca to wybierzmy na klawiaturze ok.

6:43I tutaj niech to wszystko wróci do swojego pierwotnego kształtu, czyli skopiuje te

6:47początkowe skrajne klatki kluczowe Command C Command V i to samo zrobię

6:51tu command C command V.

6:54I teraz ładnie nam to wraca.

6:55Przy czym oczywiście wiadomość powinna zniknąć.

6:58Więc tu wybierzmy sobie te na klawiaturze, ponieważ będziemy sterować

7:02wartością opacity i ustawmy na 0.

7:06OK.

7:09I teraz w tym momencie dokładnie powinna wskoczyć wiadomość tutaj u góry.

7:13Więc to co zrobimy to tą.

7:17Kompozycję Conversation, czyli tą wrzucimy sobie właśnie tutaj do kompozycji Empty.

7:25I umieścimy to na odpowiedniej warstwie, czyli gdzieś tutaj.

7:32OK.

7:33To powinno być tu, ale naturalnie powinniśmy to przesunąć w prawo, żeby.

7:40Pojawiło się to w odpowiednim momencie, czyli może jakoś tak.

7:46Ciach! O właśnie.

7:50Super! Dokładnie o coś takiego nam chodziło.

7:56I teraz myślę, że w momencie kiedy rozpoczyna się tworzenie tego czatu, to

8:01chciałbym, żeby zniknęły też te elementy.

8:05To i to.

8:06To są te warstwy.

8:08Możemy wybrać klawiszy na klawiaturze po zaznaczeniu ich wszystkich.

8:12Klikam na Opacity przy jednej z warstw i widzimy, że

8:15klatki kluczowe dodają się do wszystkich.

8:18A teraz przesuwamy się kilka klatek do przodu i wybieramy opacity na 0.

8:24Możemy też te warstwy przyciąć.

8:25Lewy alt i prawy nawias kwadratowy.

8:32Zobaczmy jak to wygląda teraz.

8:39Super!

8:40Przejdźmy do głównej naszej kompozycji, czyli All Is Main Competition.

8:51I otwórzmy naszą animację raz jeszcze.

9:13Super!

9:15Jeszcze jedna rzecz.

9:16W momencie kiedy nasz użytkownik klika tutaj w pole tekstowe, aby rozpocząć

9:20wpisywanie, to kursor powinien zniknąć.

9:23Niech on znika razem z tą literką C.

9:26Czyli wybieram sobie warstwę z kursorem, wybieram tę na klawiaturze.

9:29Opacity opacity.

9:31Będziemy sterować opacity.

9:33Przenosimy się kilka klatek do przodu i ustawiamy je na 0.

9:40OK, ten kursor nie będzie nam już potem potrzebny, więc w zasadzie

9:43możemy przyciąć warstwę.

9:45Tu mamy jeszcze.

9:47Pozostała nam się oryginalna warstwa z Illustratora też nie będzie nam potrzebna.

9:50Możemy ją usunąć.

9:55Super.

9:56OK.

9:57I teraz po chwili, kiedy już tutaj ten nasz użytkownik wpisze tę wiadomość i

10:02pojawi się ona jako popup, powinniśmy zaraz po tym uzyskać

10:06wiadomość zwrotną od chatbota.

10:09Czyli powinna tu wskoczyć druga wiadomość.

10:13Jak to zrobić?

10:14Przejdziemy teraz do tej kompozycji o nazwie Empty.

10:19Mamy tutaj naszą kompozycję Conversation, czyli tutaj pojawia się

10:24wiadomość użytkownika.

10:26Czekamy kilka sekund.

10:27Następnie wybieram P na klawiaturze, klikam na stop już przy pozycji

10:31bo będę animować pozycję.

10:33I teraz przesuwamy się kilka klatek do przodu i podnosimy

10:38to troszkę wyżej, czyli tutaj.

10:43Naturalnie IT Izis.

10:48Tutaj może popracujemy z.

10:54Prędkością ok.

10:58A i fajnie nam wyskakuje tutaj ta wiadomość w momencie, kiedy ona

11:02wskakuje, czyli gdzieś tutaj.

11:04Byłoby fajnie, gdyby pojawiały się, pojawiły się, fajnie wyskoczyły ten

11:09avatar oraz te poszczególne informacje.

11:10Tak więc mamy Play cheat ustawiony przy dwudziestej pierwszej sekundzie.

11:15Klikam sobie tutaj.

11:16Ten play head jest tutaj w odpowiednim miejscu i tutaj możemy sobie skopiować te

11:20klatki kluczowe Command C i damy je od razu tutaj w tym miejscu do tego avatara.

11:26Następnie damy ją do tej wiadomości, ale

11:31punkt odniesienia przesuniemy tutaj, żeby wiadomość wyskoczyła nam

11:35tutaj z lewej strony Command V.

11:38To samo zrobimy chyba z tym elementem.

11:45Tutaj też punkt odniesienia damy tak Command V i tutaj też punkt odniesienia

11:54damy w ten sposób i Command V.

11:57Wszystkie te warstwy, które odpowiadają za Messages nr 2.

12:02Może ustawimy inny kolor np. na Yellow?

12:06OK.

12:08Wybierz sobie U na klawiaturze i nie chciałbym, żeby te elementy

12:12wyskakiwały w tym samym momencie, tylko jakoś tak kaskadowo.

12:17Czyli przede wszystkim możemy te warstwy tutaj sobie przyciąć ok.

12:23I np.

12:23najpierw wskoczy nam avatar, potem wskoczy nam ten element, przesuniemy

12:28go troszeczkę do tyłu, potem wskoczy nam ten element, czy też

12:32przesuniemy go do tyłu i na końcu już ten element.

12:37Tak?

12:42A.

12:47Jeszcze może to troszeczkę opóźni.

12:56Super.

12:58Wracamy teraz do Empty.

13:02Widzimy, że.

13:04Pojawia się nowa wiadomość czat.

13:06Bot nam odpowiada i teraz użytkownik powinien wpisać kolejną wiadomość.

13:14Zobaczmy jak to wygląda w tej naszej głównej kompozycji.

13:33Super!

13:34Dokładnie o coś takiego mi chodziło.

13:35Wybieram Command s i przechodzimy dalej.