Projektuj Animacje UI z Lottie Files i After Effects: Obrys wypełnienie i opacity

0:00Jak widzisz, animowanie naszej monety nie było jakoś szczególnie trudne.

0:04Raczej tutaj skupiliśmy się na bardzo podstawowych rzeczach, takich jak skala,

0:07pozycja i przestawianie punktów wektorowych.

0:11I udało nam się uzyskać bardzo fajny efekt.

0:13Ale oczywiście to nie wszystko.

0:14Ja chciałbym jeszcze dodać jakiś shadow pod tą manetką, więc

0:19wybieramy Layer New, a następnie Shape Layer czyli warstwa kształtu.

0:24I teraz chciałbym tutaj wybrać sobie narzędzie Elipsa.

0:28Możemy oczywiście wybrać między prostokątem, zaokrąglonym

0:32prostokątem, elipsa, jakimś kształtem, poligon czy gwiazdą.

0:37Wybierzmy elipsa i narysuję sobie tutaj taką elipsę.

0:44Może z wciśniętym klawiszem Command tak aby rysować od środka?

0:48Narysujemy ją tutaj, w tym miejscu.

0:50Chciałbym, żeby jej kolor był czarny.

0:53Właściwości takiego kształtu wektorowego mogę zmienić w kilku miejscach, np.

0:59tutaj.

1:00W momencie kiedy nasza warstwa kształtu jest zaznaczona, możemy przejść do górnego

1:04panelu kontrolnego i pracować z wypełnieniem i obrysem, gdzie.

1:10Możemy najpierw zdefiniować rodzaj wypełnienia czy ma być

1:14w ogóle bez wypełnienia, czy z wypełnieniem płaskim, czy np.

1:18z gradientem linearnym czy radykalnym.

1:20Możemy też ustawić tryb mieszania tego wypełnienia, ale w przypadku pracy z

1:25plikami LOT może tego lepiej nie róbmy.

1:28Zostawmy sobie płaski kolor i wybierzmy przycisk OK.

1:35Następnie możemy tutaj teraz popracować nad kolorem samym w sobie.

1:39Może niech on będzie jakiś ciemno niebieski czy fioletowy.

1:44W ten sposób możemy też pracować z obrysem.

1:48W tym miejscu możemy zdefiniować kolor obrysu, np.

1:51czerwony.

1:52A tutaj możemy popracować nad jego grubością.

1:55Dostęp do tych wszystkich właściwości mamy też z pozycji samej warstwy.

2:01Jeśli rozwiniemy content, a następnie naszą elipsę, to mamy możliwość pracy z

2:07obrysem i z wypełnieniem, przy czym tutaj mamy znacznie więcej możliwości.

2:10Możemy wprowadzać np.

2:12do obrysu obrys w postaci linii przerywanej czy np.

2:18możemy.

2:21Zmieniać zakończenia, czy narożniki na zaokrąglone.

2:26W tym przypadku myślę, że lepiej będzie, jeśli zrezygnujemy z tego obrysu.

2:31Więc tutaj możemy wybrać strzałkę, a następnie none czyli brak wypełnienie też.

2:38Mamy tutaj całą masę możliwości dotyczących wypełnienia.

2:40Możemy animować kolor czy opacity samego wypełnienia.

2:44Czyli transparentność.

2:47OK, ale to co nas interesuje to nie content, a transform.

2:53Czyli.

2:55Praca ze skalą.

2:58Myślę, że możemy tutaj ustawić stopień rozłożymy proporcji między szerokością a

3:02wysokością i w momencie kiedy nasza moneta będzie np w tej pozycji to byłoby

3:09fajnie gdyby się trochę zwyciężyło.

3:13OK, tutaj powiedzmy, że nam się to.

3:20Troszkę coś rozciągnie w ten sposób i tutaj kupujemy te klatki kluczowe.

3:26Tutaj niech nam się.

3:31Pojawi ta klatka kluczowa, więc wybierzmy Command C, a następnie Command V i wkleja

3:35się ona dokładnie w to miejsce, na którym jest plakat.

3:38No i teraz tutaj końcówka animacji, czyli musimy mieć taki sam wygląd tego efektu

3:44shadow jak na początku, czyli tutaj Kopiujemy sobie tą pierwszą klatkę

3:48kluczową Command C lub ctrl+c, przenosimy się na koniec i command V czyli wklejamy.

3:54No dobrze, no i zobaczmy teraz jak to wygląda.

4:02Możemy ten shadow.

4:04Oczywiście warto nazywać warstwy, więc możemy wybrać prawy klawisz myszy i tutaj

4:08na dole listy wybrać Li name albo ewentualnie Enter i wpisujemy shadow.

4:13Możemy tą warstwę przesunąć na spód, a następnie np.

4:18tutaj możemy dodać sobie jakiś desing delikatny do

4:23tych klatek kluczowych, więc wybierzmy ew.

4:26Klawisz Function i F9 i zobaczmy jak to wygląda.

4:42Bardzo fajnie.

4:53Możemy też animować inną właściwość naszej warstwy, mianowicie

4:57opacity, czyli przeźroczystość.

5:02Natomiast w przypadku warstwy kształtu, czyli Shape Layer

5:05mamy możliwość sterowania opacity całej warstwy, albo ewentualnie możemy

5:10przejść tutaj do content i np.

5:13rozwinąć naszą elipsę i możemy tutaj sterować opacity samego wypełnienia albo

5:21opacity samego obiektu zależnie od tego co jest nam potrzebne.

5:29Takim opacity możemy sterować, jeżeli chcemy sterować opacity.

5:35osobno obrysu i wypełnienia.

5:37Wtedy warto stosować tutaj opacity odpowiednio dla fill

5:43czyli tutaj oraz odpowiednio dla stroke czyli tutaj.

5:50Naturalnie możemy.

5:51Tutaj mamy dostęp do stop łącza tak aby ustawiać sobie klatki

5:55kluczowe z odpowiednią wartością na linii czasu.

5:59Myślę, że możemy ograniczyć się tutaj do sekcji Transform,

6:03ponieważ będziemy wprowadzać opacity dla całej tej warstwy,

6:06więc myślę, że tutaj wciśniemy sobie stop, po czym postawimy pierwszą

6:10klatkę kluczową tutaj.

6:13Tu w tym miejscu.

6:14Jako, że nasz nasza moneta jest najwyżej to zmniejszymy sobie troszeczkę opacity.

6:22I.

6:22Tą początkową klatkę kluczową kopiujemy i wklejamy na koniec.

6:26Tutaj możemy sobie dać using.

6:31Wybieram klawisz function i F9.

6:46OK. Wygląda bardzo fajnie.

6:48Zapisujemy zmiany i przechodzimy do lekcji następnej.