Projektuj Animacje UI z Lottie Files i After Effects: Zastosowanie prostej ekspresji

0:00Nasza animacja działa bardzo dobrze.

0:02Mamy tutaj tę animację zbudowaną z trzech kompozycji 1, 2 oraz 3, Ale

0:07to oczywiście nie koniec.

0:09To co trzeba zrobić, to jeszcze w momencie, kiedy użytkownik

0:14wybierze sobie tą Ave, To tu ona się powinna pojawić W tym miejscu

0:23oraz tutaj powinien się zmienić awatar.

0:28Więc ja tutaj mam.

0:29z firmy.

0:30Pobrałem sobie kolejny ekran i mam tutaj właśnie ten ekran, który

0:35powinien się wyświetlić.

0:36To są głównie te avatary oraz powinien być podmieniony tekst.

0:39Tak.

0:42Więc weźmiemy sobie.

0:44Po prostu weźmiemy sobie po prostu te warstwy i podmieniamy je.

0:50Więc wybieramy File, a następnie Import File.

0:54Wybierzemy sobie plik o nazwie Ava plik Illustratora.

0:58Będzie to kompozycja z zachowaniem rozmiarów warstw.

1:01Jak zawsze wybieram open i to co tutaj chciałem wziąć

1:04to po prostu podmienić sobie.

1:09Te trzy warstwy.

1:09Tak więc zaznaczam jest Shift em Command C.

1:13Następnie wracam tutaj do tej kompozycji i zobaczmy jeszcze tylko, w którym miejscu.

1:22O tu.

1:23Tutaj powinna się już wymienić.

1:27Powinny się wymienić te avatary i tutaj bardzo fajna rzecz.

1:30Zwróćmy uwagę, że jestem teraz na siódmej sekundzie.

1:32Tak, jeżeli kliknę dwukrotnie.

1:35Tutaj mamy siódmą sekundę dziesiątą klatkę.

1:37Jeżeli kliknę dwukrotnie na kompozycję Empty, to kursor też mi się tutaj ustawił.

1:42Siódma sekunda, dziesiąta klatka.

1:45I teraz to oraz to oraz to powinno być tu przycięte, więc

1:51zaznaczyłem sobie z Shift em te warstwy.

1:54Przytrzymuję shift, klikam na to, na to oraz na to.

1:57Te warstwy tu zostały zamienione. Możemy je.

1:59Możemy zmienić im kolor np. na red.

2:02I przytrzymuję teraz alt oraz prawy nawias kwadratowy.

2:05I tu sobie przyciąłem te warstwy.

2:07Teraz wybieram Command V aby wkleić sobie te nowe avatary i wytnę je teraz w taki

2:15sposób, że wybiorą sobie alt oraz lewy nawias kwadratowy.

2:20I teraz tutaj te mi znikają, a te się pojawiają.

2:23Dokładnie o coś takiego chodziło.

2:26OK, ten wielki text tylko zamienimy sobie na shape wektorowe czyli prawy klawisz

2:31myszy Create na dole Shape from vector layer.

2:36OK, widzimy, że tutaj będziemy musieli parę elementów usunąć to sobie.

2:41Tę oryginalną warstwę z Illustratora sobie usuniemy, a tutaj wpiszmy sobie group.

2:47I mamy kilka grup do usunięcia tych ułożonych kaskadowo.

2:53Wszystkie one zazwyczaj mają nazwę Group Run.

2:58OK, jeszcze sprawdźmy, czy na tej warstwie jest Merge path, który też

3:03powinien być usunięty.

3:06OK, jest tutaj kilka.

3:17I wybieram Delete albo Backspace.

3:19No i teraz ładnie mi się to wymienia.

3:23W porządku.

3:24I teraz, kiedy przejdziemy do naszej głównej kompozycji Alias Main Animation.

3:28No to zobaczmy, że kiedy kursor wybierze tę Ave Klika i mamy już nowy.

3:36Nowe avatary.

3:43Zobaczmy jeszcze całą animację od nowa.

3:52A dokładnie o coś takiego chodziło i tutaj.

3:56W momencie kiedy kursor najeżdża na Send message, to chciałbym, żeby

4:00coś zaczęło się tutaj wpisywać.

4:02Mianowicie wpiszemy sobie komendę slash C.

4:07I w momencie kiedy wpiszemy tą komendę to dopiero pojawi nam

4:11się ten drop down menu z tymi actions.

4:15Natomiast jaki jest z tym problem?

4:18Taki, że los nie zna tekstu, nie rozumie tekstu.

4:22Taki format tekstowy dla LOD jest niezrozumiały, więc jeżeli będziemy

4:27tworzyć tutaj warstwy tekstowe, no to niestety będziemy musieli od

4:31razu zamienić je na nasze wektorowe.

4:38Przejdźmy do kompozycji Empty.

4:40Przede wszystkim na pewno będzie trzeba ją wydłużyć, bo ona trwa 20 sekund, a tutaj

4:45jeszcze będziemy mieli czat, konwersacje z botem itd.

4:48Więc cała nasza animacja będzie trwała mniej więcej około minuty.

4:53Dlatego przejdźmy do tej kompozycji Empty.

4:56Position Settings.

4:58Ustawmy tutaj minutę 20.

5:02Porządku. I teraz.

5:12Zaznaczmy z klawiszem Command warstwy, które powinny zostać wydłużone.

5:18Bo to, że wydłużyć kompozycję to nie znaczy, że wyruszyliśmy też

5:22warstwy, które na niej się znajdują.

5:23Widzimy, że tutaj one znikają.

5:26Możemy przejść.

5:27Możemy ustawić sobie play head na samym końcu kompozycji, a następnie dla

5:30zaznaczonych warstw wybierzemy alt i prawy nawias kwadratowy.

5:33I teraz to wszystko zaczęło śmigać.

5:37Jeszcze jedna rzecz.

5:38Mamy tutaj ten nasz gradient glow, który sobie stworzyliśmy w poprzedniej lekcji.

5:43Chciałbym, żeby on się w jakiś sposób animować i możemy tutaj zastosować

5:47bardzo prostą ekspresję.

5:49Zobaczymy też przy okazji, jak z taką ekspresją poradzi sobie LOT i kiedy już na

5:52samym końcu pracy z tą animacją wyeksportować plik lotu.

5:57Chciałbym tutaj przejść do pozycji, czyli zaznaczam te warstwy, wybieram te,

6:02wybieram position.

6:06I np.

6:07niech tam sobie to tak chodzi w te i wewte.

6:11Czyli np. tu niech będzie pozycja numer 1.

6:14OK, na drugiej sekundzie, czy może nawet na czwartej niech sobie to zjedzie tu.

6:24I kopiemy sobie tą pierwszą klatkę kluczową.

6:26Gdzie ten gradient jest po prawej stronie command C i tutaj sobie wklejamy

6:31command V i tak niech sobie to podąża.

6:37Tylko musimy dodać desing.

6:39Więc wybierzmy function F9.

6:46Wybieram Graph Editor i będę chciał tutaj zrobić coś takiego, żeby ten

6:53ruch był bardziej płynny.

6:55Mniej więcej tak.

7:03Bardzo fajnie to wygląda, ale chciałbym, żeby działo się to cały czas.

7:08Więc mogę oczywiście zaznaczyć te klatki kluczowe i je wklejać, kopiować,

7:11wklejać, wklejać, wklejać, wklejać.

7:13Ale mamy do tego prostą ekspresję, która pozwoli nam zapętlić ten ruch w czasie.

7:18Aby uruchomić wpisywanie ekspresji muszę wcisnąć lewy klawisz Alt lub Option

7:24na Macu i kliknąć na nasz Stop Watch.

7:27I tutaj mam możliwość teraz wpisywania wpisywania różnych komend

7:33w oparciu o JavaScript.

7:36Nie jestem biegły w ekspresji, nie znam bardzo rozbudowanych ekspresji, natomiast

7:41te podstawowe, które pomagają mi w codziennej pracy jak najbardziej stosuję.

7:45W w przypadku ulotki.

7:46Stosowanie ekspresji, zwłaszcza tych bardziej rozbudowanych,

7:50jest ryzykowne, bo ulotki może nie specjalnie wyeksportować tak,

7:57jak powinno się to wszystko animować.

7:59Dlatego ja tutaj zalecam albo nie stosować ekspresji w ogóle, albo takiej ekspresji.

8:03Bardzo proste jak np.

8:04lub czyli lub out.

8:08I tak wygląda nasza ekspresja.

8:13Ten prosty kod pozwoli nam na zapętlenie tego ruchu tak długo, jak długo trwa

8:18cała warstwa tudzież kompozycja.

8:21Mimo, że mamy tutaj tylko trzy te klatki kluczowe, to widzimy, że

8:26ten ruch odbywa się cały czas.

8:31Play Head dalej przesuwa się po linii czasu.

8:33I ten element cały czas się rusza w lewo i w prawo.

8:46Dokładnie o taki efekt mi taki efekt mi chodziło.

8:49OK, na teraz to wszystko.

8:53Przejdźmy do tej naszej głównej kompozycji.

8:56Widzimy, że teraz tę kompozycję Empty możemy sobie wydłużyć.

9:01I teraz wszystko tutaj działa OK.

9:04Tak jak zapowiedziałem, będziemy teraz pracować troszeczkę z tekstem.

9:09Tylko że cokolwiek z tym tekstem zrobimy, będziemy musieli później

9:12zamienić go na wektorowe.

9:14Tutaj chciałbym, żeby kursor wpisał komendę slash C i dopiero żeby

9:17wyskoczył ten drop down menu.

9:19Dlatego zapiszmy zmiany i przejdziemy w lekcji następnej, w której to zrobimy.