Projektuj Animacje UI z Lottie Files i After Effects: Czas i Maska

0:00Przechodzimy dalej. Przed nami dwa zadania.

0:02Pierwsze z nich to.

0:04Może troszeczkę warto przyspieszyć tą animację, bo dwie sekundy na obrót

0:07takiej małej monety to troszeczkę długo.

0:11A po drugie to chciałabym, żeby tutaj był ten profil monety widoczny,

0:16żeby też on się animować.

0:18Więc może najpierw spróbujemy przyśpieszyć tą animację i spróbujmy

0:21ją skrócić do sekundy.

0:24I możemy to zrobić w taki sposób.

0:27Wybieramy sobie tutaj u. Na klawiaturze.

0:29Po zaznaczeniu tych dwóch warstw z SHIFT em i chciałbym na przykład,

0:36żeby ten pierwszy obrót trwał powiedzmy.

0:4512 klatek.

0:49OK.

0:50Tutaj ustawiamy nasze klatki kluczowe, a następnie wciskając lewy klawisz

0:55ALT oraz prawy nawias kwadratowy.

0:57Przycinamy warstwy do aktualnej pozycji.

1:00To samo zrobimy.

1:01W zasadzie tutaj też chciałbym, żeby to trwało 12 klatek,

1:06więc ustawiamy się tutaj.

1:08Tutaj przenosimy te ostatnie klatki kluczowe i przycinamy

1:12obie warstwy alt i prawy nawias kwadratowy.

1:17Następnie przenosimy to tutaj.

1:24No i tu musimy teraz skrócić naszą kompozycję do 24 klatek.

1:28Wybieram kompozytor, a następnie kompozycję Settings.

1:31I owszem, możemy tutaj wpisać.

1:35Czas trwania kompozycji, ale równie dobrze możemy po prostu sobie tutaj

1:40skrócić ten czas.

1:47A i teraz wygląda to tak znacznie szybciej, znacznie lepiej.

1:50No dobrze, to już pierwsze zadanie za nami.

1:53Teraz czas na drugie zadanie, czyli ustawienie tego profilu.

1:58Naturalnie ten obiekt, tę warstwę też musimy zamienić na edytowalne ścieżki.

2:04I myślę, że zanim to zrobimy, to jeszcze rozwijamy te warstwy

2:11i wszystkie te warstwy, które już mamy zamienione na ścieżki.

2:15Po prostu troszeczkę je po prostu tym warstwą.

2:19Chciałbym dodać troszeczkę transparentności, więc wybieram te na

2:22klawiaturze i zjeżdżam z Opacity np.

2:26do 17%, tak żeby mi nie przeszkadzały.

2:29Mogę też je zablokować tutaj kółeczkami.

2:32I one teraz są takie pół przeźroczyste.

2:35W żaden sposób mi tu nie przeszkadzają.

2:37OK, teraz zajmijmy się tym.

2:40Możemy wybrać prawy klawisz myszy, a następnie znowu na dole listy.

2:44Tutaj wybieram Create Shape from Vector Layer.

2:47I ok, mamy to!

2:48Tą oryginalną warstwę z Illustratora po prostu sobie usuniemy.

2:51Będziemy teraz pracować z tą warstwą wektorową, która ma aż.

2:55Zobaczmy tutaj 18.

2:58ścieżek.

3:00Jest tutaj z czym pracować, ale myślę, że będziemy tutaj pracować troszkę inaczej.

3:05Przede wszystkim możemy sobie zaznaczyć wszystkie te ścieżki.

3:09Tutaj np.

3:10wystarczy, że podświetlić sobie tylko jedną z nich, a następnie przyciągniemy

3:15kursorem i mamy zaznaczone wszystkie.

3:17To co chciałbym teraz zrobić to po prostu sobie je rozciągnąć.

3:21Mogę to zrobić z wciśniętym klawiszem Command, aby

3:24skalować zarówno z prawej, jak i z lewej strony od środka w ten sposób.

3:30OK.

3:31Teraz chciałbym dodać maskę do tej warstwy i chciałbym, żeby tą maską,

3:36żeby ta maska stanowiła elipsę.

3:39Dlatego może najpierw wyłączę sobie tutaj podgląd tej warstwy,

3:44a następnie przerzucę się tutaj właśnie na Create Mask.

3:51Bo jeżeli zostawię sobie tutaj podświetlaną gwiazdkę, to po prostu rysuję

3:55do tej warstwy nowy kształt wektorowy, a nie o to mi chodzi.

3:59Chcę stworzyć maskę, która zakryje poszczególne elementy,

4:05które nie chciałbym, żeby wystawały poza tą naszą monetę, więc upewniam się, że

4:10rysuję maskę Tool create mask i po prostu sobie rysuję nową taką

4:17elipsę, mniej więcej podobną do tej, która jest pod spodem, czyli ta nasza moneta.

4:25OK.

4:26I teraz jeśli włączę sobie podgląd tej warstwy, no to widzimy, że

4:31mimo że ja ją tutaj ściągnąłem na boki, to ona jest wyświetlona tylko wewnątrz tego

4:36kółka i to co ja chciałbym teraz zrobić, to animować odpowiednio to kółko w taki

4:41sposób, żebyśmy mogli uzyskać wrażenie głębi naszej

4:47monety, tak, że ona ma jakiś profil.

4:51I teraz po prostu przenieśmy sobie może całą tą warstwę niżej pod spód.

4:57OK.

4:58Tak, żebyśmy tutaj widzieli te nasze monety.

5:01Może zaznaczymy je znowu, Wybierzmy klawisz T i zwiększymy

5:05troszkę tą transparentność.

5:08I znowu sobie zablokujemy te warstwy kłódką.

5:10OK.

5:12I tutaj będziemy animować maskę.

5:14Animuje ją dokładnie tak samo jak każdą inną ścieżkę wektorową.

5:18Możemy kliknąć stop tutaj, aby postawić pierwszą klatkę kluczową

5:25i następnie, kiedy nasza moneta jest w.

5:29Tutaj w tym miejscu.

5:30Może tutaj wyciągniemy prowadnicę O.

5:34Wybieram Command R i mogę wyciągnąć z tych linijek, które się pojawiły prowadnice.

5:41No to chciałbym żeby ta maska się tutaj spłaszczyć do tej linii.

5:47I to samo zrobimy z drugiej strony.

5:53Czyli zaznaczymy sobie tutaj.

5:56Czyli zaznaczymy sobie.

6:00Tą naszą monetę z drugiej strony.

6:03I też tutaj rysujemy sobie taką prowadnicę.

6:08OK.

6:11No i teraz będziemy pracować z maską.

6:13Czyli w momencie, kiedy ta nasza maska ma włączoną tutaj klatkę

6:16kluczową na w pierwszej.

6:20W pierwszej klatce, to przenosimy się tu.

6:25I animuje my naszą maskę, czyli tutaj jest płaszcz.

6:34My tutaj też możemy zmienić kolor maski np.

6:39na powiedzmy.

6:41jasno zielony kolor więzów maski.

6:46Tutaj np. możemy wybrać sobie Add Vertex tool i np.

6:52w tym miejscu dodać nowy punkt wektorowy.

7:00I dać go w tym miejscu.

7:01Zaraz sobie wyprostuje te ścieżki.

7:03Dodajmy sobie tu.

7:09Dajmy nowy punkt wektorowy.

7:14I dajmy go sobie tutaj.

7:15Teraz warto te ścieżki wyprostować.

7:18Mamy tutaj wąsy, które determinują nam krzywizny tych

7:21tych ścieżek, więc możemy to zrobić w dwojaki sposób albo po prostu je tutaj

7:26sobie schować te wąsy, albo ewentualnie możemy wybrać sobie tutaj pod Add Vertex

7:34Tool mamy narzędzie Convert Vertex Tool i możemy zamienić te

7:39punkty wektorowe właśnie na punkty bez wąsów, a w ten sposób.

7:46No i teraz zobaczmy jak się to animuje.

7:48Widzimy, że w momencie kiedy nasza moneta się obraca otrzymuje taki bardzo fajny

7:54profil, czyli ma po prostu swoją głębię.

7:57No i otrzymaliśmy takie wrażenie trójwymiarowości w ten sposób.

8:03Teraz musimy to zrobić w drugą stronę, czyli tutaj.

8:07Tu z kolei nasza moneta musi się wycofać, więc zaznaczmy tą pierwszą

8:13klatkę kluczową i skopiuje ją.

8:15Wklejamy na samym końcu.

8:20OK, widzimy, że to działa.

8:27Nasza moneta się obraca.

8:30OK, ten profil możemy.

8:35Zaznaczyć w taki sposób, że po prostu zmienimy kolor warstwy np.

8:38na czerwony.

8:41W porządku, odblokujemy sobie warstwy.

8:44Tutaj znowu zaznaczam z Shift MT4 warstwy wybieram klawisz T i

8:48Opacity ustawimy na 100%.

8:56OK, mam tutaj jeszcze kilka takich niedoskonałości, które warto poprawić np.

9:00w tym miejscu.

9:07Tutaj możemy te warstwy zakończyć.

9:11Alt i prawy nawias kwadratowy.

9:20OK.

9:21Wybieram ó na klawiaturze.

9:30I tu na przykład w tym miejscu możemy sobie poprawić ścieżkę.

9:49I zobaczmy tutaj.

9:58I teraz powinno być w porządku.

10:08I ok.

10:08Nasza moneta się obraca i dokładnie o taki efekt nam chodziło.

10:12Ale to nie wszystko, co chciałbym zrobić z naszą naszą monetą.

10:17Dlatego myślę, że możemy teraz śmiało przejść do lekcji następnej.

10:22Do usłyszenia.