Projektuj Animacje UI z Lottie Files i After Effects: Praca na ścieżkach i praktyczne maskowanie

0:00OK, to teraz chciałbym, żebyśmy stworzyli portal, z którego

0:03wyłania się nasza postać.

0:04I tutaj w źródłach przygotowałem taki plik, który będę chciał z animować

0:11w takiej troszeczkę perspektywie.

0:14Pokażę Ci, jak ja mam na to pomysł.

0:16Może tą stronkę troszeczkę zmniejszymy jeśli chodzi o grubość.

0:22OK.

0:22Każdą z takich fal rozdzieliłem na osobne warstwy.

0:26Będę chciał to obracać niezależnie.

0:28Tak, chciałbym, żeby każdy z tych elementów niezależnie się obracał.

0:32Więc ten portal ciągniemy teraz do After Effects, więc file import jak zawsze.

0:43OK, klikam i mamy to.

0:46I teraz zaznaczę sobie ten border shape, czyli ten główny element, który chciałbym,

0:51żeby się obracał i on będzie jakby stanowił też maskę dla tych elementów.

0:55Możemy teraz wybrać Command R aby wywołać silniki i stworzę prowadnice przyklejając

1:02je właśnie do tego środka do tego środkowego punktu odniesienia.

1:08I teraz każdy z tych z tych elementów chciałbym, żeby miał

1:13punkt odniesienia dokładnie w tym samym miejscu.

1:15Więc zaznaczam 1.

1:17Wybieram narzędzie Anchor Point.

1:21Mogę wywołać je klawiszem Y albo ewentualnie wywołać stąd

1:24i dojeżdżam tutaj punktem odniesienia we wszystkich tych warstwach.

1:28Do tych prowadnic tak się to ładnie przyklejają.

1:33Porządku tutaj też.

1:38Tutaj też i tutaj też wszystkie te elementy powinny się obracać,

1:43więc zaznaczam je, a następnie wybieram R na klawiaturze i stop.

1:47Klikam dla rotacji mamy pierwsze klatki kluczowe.

1:51Kompozycja niech trwa może z 6 sekund.

1:53Ustawmy duration na 6.

1:59Skróciłem też kompozycję naszym bohaterem do 4 sekund.

2:03W zasadzie i tak mamy tutaj ten worker ja ustawiony na 4 sekundy i tutaj musimy

2:12sobie wszystkie te warstwy wydłużyć.

2:14Czyli ustawiam Play head na samym końcu kompozycji, a następnie alt

2:17i prawy nawias kwadratowy.

2:20I tutaj oczywiście chciałbym wprowadzić ruch np.

2:23ten główny element niech się obróci raz o 360 stopni.

2:29OK, widzimy, że to działa.

2:33Następnie kolejny element niech się obróci w drugą stronę, czyli

2:38wpiszemy sobie tutaj minus 1.

2:41Mówimy, że to działa w ten sposób.

2:43Tutaj np.

2:44możemy sobie wpisać powiedzmy dla tego elementu kolejnego wpiszemy np.

2:49wartość 2 i się obróci dwukrotnie.

2:52Tutaj minus 2.

2:53Po prostu chciałbym, żeby te elementy obracały się niezależnie.

2:57Tutaj wpiszemy sobie 1.

2:59Tu może minus 1.

3:02I tu np. piszemy sobie 2.

3:04OK, zobaczmy teraz jak to wygląda.

3:09Coś takiego i myślę, że ruch jest sam w sobie ok.

3:13Ale teraz musimy ustawić z tego taką perspektywę.

3:17Jak to zrobić np.

3:18ten element ustawimy sobie troszeczkę w ten sposób.

3:21Kolejny element przesuniemy sobie troszkę bardziej tutaj, następny

3:27troszkę tu ok, kolejny.

3:34W ten sposób kolejny tak.

3:39I ostatni.

3:42Tutaj. tutaj.

3:51To może dajmy troszkę bliżej.

3:55Teraz z tych fal, które są wewnątrz tego fioletowego elementu

4:00stworzymy sobie kompozycję.

4:01Wybieram prawy klawisz myszy, następnie plikom posta i na dole listy

4:05i niech to będzie.

4:08Wave Composite tzn.

4:12upewniam się, że wszystkie atrybuty tych warstw przenoszę do tej nowej kompozycji.

4:16W porządku.

4:17I teraz skopiuję sobie ten border shape, a następnie zrobię z niego maskę.

4:22Nazwijmy sobie Border mask.

4:27Skorzystamy z kanału Alfa.

4:32I te kompozycje z tymi falami po prostu sobie masujemy tutaj.

4:44I wygląda fajnie.

4:55To oczywiście nie wszystko. Co z tym zrobimy.