Projektuj Animacje UI z Lottie Files i After Effects: Animacja Drop down Menu

0:00Nie przedłużając już zaczynamy animację.

0:02Wszystkie te warstwy, które znajdują się nad background em chciałbym

0:05podlinkować do background u.

0:07Tak żeby w momencie kiedy ja zacznę coś robić z diagramem, żeby one też w jakiś

0:11sposób się tutaj animować, więc zaznaczam je wszystkie z Shift em, a

0:16następnie wybieram pick WIP, aby podporządkować je do background.

0:20I teraz jeżeli ja zacznę zmniejszać background, to widzimy, że te

0:24pozostałe elementy też się zmniejszają.

0:26Jeśli chodzi o background to wybiorą sobie klawisz Y na klawiaturze, aby przenieść

0:30punkt odniesienia tutaj na sam dół.

0:33Ponieważ chciałbym, żeby cały ten panel właśnie wyskoczył nam od dołu i przejdźmy

0:39teraz do ustawień kompozycji Kompozycja.

0:41Następnie Composite Settings i myślę, że jedna minuta to zdecydowanie za dużo.

0:47Ustawmy sobie tutaj może 20 sekund, minuty 0 ok.

0:53I teraz tutaj możemy powiększyć, przybliżyć się do naszej linii czasu I np.

1:00w tym miejscu chciałbym, żeby tutaj się wszystko już pojawiło na 100%, ale np.

1:07tu niech będzie 0.

1:10No i tak nam się to powiększa troszeczkę wolno, więc przyspieszamy, to

1:15możemy tutaj sobie dodać jakiś leasing, więc wybierzmy function i F9.

1:21OK.

1:23Natomiast byłoby fajnie gdyby troszeczkę to za pasowało, więc tu dodamy

1:28jedną klatkę kluczową i tu np.

1:31drugą i powiedzmy tu trzecią, więc tutaj będzie to troszeczkę za duże.

1:37Ustawmy sobie tutaj 110.

1:41Tutaj może ustawmy sobie 90 6.

1:47Tutaj ustawmy sobie.

1:49105.

1:53I tutaj 100.

1:55Czyli wygląda to w ten sposób, ale dalej dzieje się to za wolno.

1:59Więc zaznaczmy sobie wszystkie klatki kluczowe, a następnie z altem

2:04lub option na maku.

2:05Macu wybieram ostatnią klatkę kluczową i spuszczam odstępy między nimi i teraz

2:11będzie to wyglądać dużo bardziej dynamicznie.

2:13W ten sposób np.

2:16ok.

2:18OK.

2:18Fajnie by było, gdyby te poszczególne elementy też tak się pojawiły, więc możemy

2:23sobie zaznaczyć te klatki kluczowe i może wyłączmy jeszcze.

2:31Wyłączmy tutaj jeszcze.

2:37Ten biały panel nie będzie nam potrzebny teraz.

2:42OK.

2:44I tutaj np.

2:46możemy sobie w tym miejscu.

2:51Wkleić Command V i tutaj nam się ładnie pojawi kolejny element.

3:01W porządku.

3:11Jednak wybierzmy Command Set.

3:14Chyba niezbyt dobrze to wygląda tutaj spróbujmy popracować nad.

3:21Ringiem.

3:32OK, zobaczmy.

3:38Może troszeczkę rozciągnie te klatki kluczowe w czasie.

3:45A teraz chyba lepiej.

3:51Więc zaznaczmy je command C i wklejamy najpierw to

3:57Command V, potem do Task 2 command v production command V potem mamy

4:05task Task 3 Command V, mamy Task 4.

4:12Command V i task 5 Command V.

4:27OK. Fajnie to wygląda.

4:32Tutaj może podepniemy ten przycisk do Task 5.

4:40OK i teraz wszystko razem się ładnie tutaj animuje.

4:51Dobra, jeszcze nie jestem przekonany co do tego bonusu tutaj,

4:56więc to może usuniemy te dwie klatki kluczowe, a tu wpiszemy sobie 100.

5:04I ok. Fajnie to wygląda ogólnie rzecz biorąc.

5:06Natomiast nie podoba mi się, że tutaj troszeczkę te ikonki wylatują poza.

5:16Poza ten building box tego tego background.

5:22Więc może zaznaczymy sobie tutaj u.

5:27I w miejscu, gdzie one są największe, czyli tutaj, gdzie mamy np.

5:33110%, to ustawmy może sobie 100, powiedzmy, nie wiem, 8 albo 106.

5:43Albo 105.

5:53Tutaj ustawmy sobie 102.

5:57A teraz już tak to nie wychodzi.

6:02A to weźmy 104, żeby zaznaczyć te klatki kluczowe i je

6:07nadpisać dla pozostałych warstw, czyli command C i.

6:12I mogę jeszcze raz wkleić to do pozostałych warstw, czyli usuńmy

6:17to i tutaj wklejamy Command V.

6:21Tutaj przejdziemy do przodu Command V tutaj też przejdziemy

6:25do przodu, tak żeby te elementy pojawiały się jeden po drugim.

6:28I tutaj też komentowała.

6:32A moim zdaniem wygląda to dużo lepiej i płynniej.

6:38I teraz zróbmy jeszcze jedną rzecz w tej kompozycji.

6:41Mianowicie chciałbym, żeby.

6:45Kursor przejeżdżał po tych poszczególnych pozycjach i żeby pojawiał

6:50się jakiś efekt hover.

6:52Mamy tutaj ten white button outline.

6:56Możemy go skopiować albo ewentualnie nie będziemy go kopiować.

7:01Zmienimy mu później kolor.

7:03Wybierzmy sobie tutaj.

7:07Content, następnie Group i mamy tutaj fill ustawione na biało.

7:12Wybierzmy może jakiś narazie ciemny ciemno grafitowy kolor ok.

7:19I wybierzmy sobie jeszcze te, a następnie z Shift MP będziemy

7:26animować pozycję i Opacity.

7:28W momencie kiedy kursor nam się pojawi to chciałbym żeby

7:33podświetli nam się ostatnia pozycja i tutaj możemy wybrać Opacity.

7:39Cofnijmy się troszeczkę.

7:40Ustawmy sobie opacity na 0.

7:43Kursor się pojawia na pierwszej pozycji.

7:47W porządku. Tutaj ustawimy sobie position.

7:51Następnie kursor przenosi się tutaj ok.

7:57Potem kursor przenosi się tutaj.

8:01Następnie kursor przeniesie się tu, aż w końcu wyląduje

8:07na ostatniej pozycji, czyli tu i tutaj.

8:11Warto ustawić sobie i link wybierz function F9.

8:17Troszkę za szybko, prawda?

8:18Więc możemy sobie przejść do Graph Editor i np.

8:23zrobimy sobie coś takiego.

8:38Zobaczmy.

8:38Teraz wygląda to lepiej, ale dalej troszeczkę za

8:42szybko, więc teraz zwyczajnie rozciągnięty w czasie.

8:47Te warstwy z altem.

8:52Dużo lepiej, prawda?

8:54I teraz, w momencie, gdy kursor jest tutaj, to chciałbym, żeby

8:58ten przycisk zmienił kolor.

9:00Czyli rozwiniemy sobie jeszcze raz tą warstwę Content group, a następnie Fill i

9:07ustawimy sobie stop push dla wartości kolor i niech tam po kilku klatkach

9:13zmieni się ten button na kolor biały. OK.

9:16ok.

9:19W porządku.

9:21I teraz to co chciałbym zrobić to jeszcze dodatkowo musimy wyłączyć,

9:29wyłączyć te czarne, te czarne warstwy.

9:33Czyli tu wybierzemy sobie te na klawiaturze i tutaj Opacity

9:39ustawiamy stop, choć ta opacity tutaj, w tym miejscu już chciałbym,

9:44żeby one były niewidoczne.

9:46OK, więc ustawmy sobie 0.

9:49Natomiast.

9:50No i w zasadzie możemy sobie przyciąć też te warstwy tutaj z altem i

9:53prawym nawiasem kwadratowym.

9:55Natomiast te dwie warstwy może zmieńmy im kolor na czerwony?

9:59Nam się teraz pojawią, czyli możemy je tutaj włączyć stąd.

10:05Alt i lewy nawias kwadratowy Tutaj przyjęliśmy je z prawej strony za pomocą

10:10skrótu ALT i prawy nawias kwadratowy.

10:12A tutaj te przyjęliśmy tu od przodu.

10:16Z pomocą skrótu ALT i lewy nawias kwadratowy.

10:19I teraz chciałabym, żeby one się tutaj pojawiły, więc musimy ustawić sobie te,

10:26ponieważ będziemy animować Opacity i np.

10:30w tym miejscu niech będą widoczne tutaj, a tutaj zjedziemy sobie do zera.

10:36I jeszcze może ustawimy sobie jakąś animację skali, więc wybierzmy sobie

10:41jeszcze dodatkowo S na klawiaturze i tutaj niech będą widoczne.

10:48Tutaj sobie je troszeczkę zmniejszymy. Zmniejszymy.

10:56OK, tutaj możemy je w zasadzie troszkę bardziej powiększyć

10:59do powiedzmy delikatnie stu sześciu.

11:04Tu je sobie zmniejszymy do.

11:0897, a tu powiększymy do 100.

11:16OK. No i naturalnie musimy dodać desing.

11:19function F9.

11:24I wygląda to całkiem fajnie.

11:28Zobaczmy jeszcze raz jak wygląda całość.

11:35Bardzo mi się podoba ten klik.

11:40W porządku.

11:41Zapisujemy zmiany w projekcie i słyszymy się w lekcji następnej.