Projektuj Animacje UI z Lottie Files i After Effects: Efekt Trim Path

0:00Mamy już w zasadzie naszą monetę zrobioną.

0:02Ale jest jeszcze jedna rzecz, którą chciałbym tutaj dodać.

0:05Jest ona istotna. Moim zdaniem.

0:07Bardzo często zresztą korzystam z tej funkcji, więc

0:10na pewno warto ją przedstawić.

0:12Chciałbym tutaj dodać jakieś wzmocnienie ruchu w postaci

0:16jakiś kresek, które gdzieś tutaj się rozpryskuje w momencie

0:21kiedy nasza moneta uderza o ziemię.

0:26I możemy to zrobić tutaj.

0:28Ja w tym celu.

0:30stworzę sobie nową warstwę, czyli wybieram w menu głównym Layer, a następnie New.

0:34I będzie to Shape Layer, czyli warstwa kształtu.

0:38Tą warstwę oczywiście warto nazwać odpowiednio.

0:41Możemy wybrać prawy klawisz myszy, a następnie na dole listy mamy Ri name.

0:44Ewentualnie wybieram Enter na klawiaturze i wpiszemy sobie Motion

0:52Shape albo Motion lines.

0:54W ten sposób i tutaj na tej warstwie narysuję sobie

1:00kilka ścieżek, kilka ścieżek wektorowych np.

1:04pierwsza z nich będzie mniej więcej w tym miejscu.

1:08Tutaj stawiam pierwszy punkt wektorowy, a tutaj drugi.

1:12I to co chciałabym tutaj dodać jako właściwości tego prostego obiektu

1:16wektorowego, to na pewno będzie to obrys.

1:19Nie chcę wypełnienia, więc fill od razu mogę ustawić na brak.

1:22Wybieram OK. Następnie przeniosę się do obrysu.

1:25Możemy ustawić grubość obrysu np 8 punktów i jego kolor np.

1:30możemy go sobie zapożyczyć stąd z tego efektu shadow myślę, że będzie w porządku.

1:35Zastanawiam się czy 8 punktów to nie jest troszkę za dużo, może 4 ustawmy

1:41i mamy, a jeśli rozwiniemy warstwę motion lines mamy content i mamy

1:45tutaj już nasz shape.

1:48Nasz Shape składa się z kształtu wektorowego, z obrysu i z

1:52wypełnienia, którego w zasadzie tutaj nie ma, więc równie dobrze możemy

1:55zaznaczyć i wybrać klawisz Delete.

1:57Dokładnie da nam to ten sam efekt.

2:00OK, ale teraz.

2:05Możemy rozwinąć sobie tutaj tą kategorię Path.

2:09Możemy chwycić za naszą ścieżkę, wybrać sobie narzędzie

2:13Selection albo ewentualnie V.

2:15Na klawiaturze możemy chwycić za węzeł ten, ustawić go tutaj w ten sposób np..

2:21Kolejna rzecz, którą będę chciał zrobić to może z dupy kupię sobie ten kształt

2:26wektorowy wybierając command D w momencie kiedy jest on zaznaczony

2:29i mamy teraz drugi.

2:30Tak i ten drugi kształt myślę, że możemy sobie przesunąć np.

2:35tutaj zaznaczmy ten węzeł i damy tutaj coś takiego.

2:39Chciałbym po prostu, żeby w momencie kiedy nasza moneta uderza

2:43w podłogę, to po prostu żeby te kreski się jakoś rozbłysk wzięły.

2:47Tutaj myślę, że możemy też dodać jeszcze jedną, więc znowu

2:52wybierzemy komendę i mamy Shape nr 3.

2:56Po prostu możemy go sobie przenieść np. tutaj.

2:58Możemy możemy rozwinąć kategorie PAS, a następnie sobie tutaj przesunąć to np.

3:05w ten sposób tak o.

3:08Załóżmy, że chcemy uzyskać taki właśnie efekt porządku i zastanawiam

3:17się, czy jeszcze zrobić jedną.

3:23OK, dajmy ją tutaj Path.

3:30I tam niech będzie troszkę krótsza o porządku.

3:33No i co teraz możemy zrobić?

3:35Musimy dodać tzw.

3:36efekt Trampa, który jest efektem stricte przeznaczonym dla kształtów

3:41wektorowych i te efekty dla kształtów wektorowych.

3:43One jak najbardziej są akceptowalne przez lody.

3:46Aby dodać taki efekt możemy wybrać w tej sekcji Contents.

3:51Po rozwinięciu zawartości warstwy możemy wybrać Add, czyli Dodaj i tutaj

3:56na dole tej listy mamy Trampa.

3:58Znowu jest to poza ekranem nagrywania, więc może ja podniosę sobie

4:01to okno z linią czasu. OK.

4:05Znowu wybieram Add i mamy tutaj Trim Path.

4:09Zwróćmy uwagę, że zostało to dodane tutaj na samym dole w tej sekcji content

4:15i będzie to dotyczyło.

4:16Ten efekt będzie dotyczył wszystkich tych czterech naszych kształtów wektorowych.

4:20Ale możemy to usunąć klawiszem Delete albo Backspace, jeśli jest

4:24zaznaczone i możemy np.

4:25zaznaczyć jeden z naszych Shape ów.

4:27I w momencie kiedy teraz wybiorę Add, a następnie dodam nasz efekt trim,

4:33to został on dodany tylko i wyłącznie do tego zaznaczonego Shape.

4:37Czyli jeżeli stworzymy tutaj jakiekolwiek animacje

4:40jakiejkolwiek klatki kluczowe to będą one dotyczyły tylko tego zaznaczonego shape,

4:46a ja chciałbym wybierzmy Command z.

4:48Aby cofnąć to ja chciałbym żeby żeby ten trim ten efekt trim dotyczył

4:54wszystkich SHAPE ów, więc zaznaczmy sobie Content add a następnie tutaj na dole

4:58listy wybieram Trim Pass co daje nam ten efekt?

5:01On jest bardzo fajny i często z niego korzystam, bo zwróćmy uwagę,

5:04że daje on nam możliwość.

5:08Takiej animacji samego ruchu, samego obrysu.

5:12Ten obrys może nam się tutaj narysować, dlatego ustawmy sobie

5:16tą wartość na 0 i np.

5:19na samym początku ustawimy sobie Play head dla wartości N ustawimy sobie

5:24klatkę kluczową tutaj i np.

5:26przy dziesiątej sekundzie ustawimy sobie wartość 100% Czyli widzimy, że

5:31te kreski teraz rosną.

5:36W porządku, dokładnie o to mi chodziło, ale widzimy,

5:39że jedna kreska zamiast rosnąć do góry to ona rośnie tutaj do naszej monety.

5:44Jest to dokładnie kształt, który jest numerem 4 i co możemy zrobić?

5:49Możemy rozwinąć go, a następnie odwrócić ścieżkę za pomocą tej ikonki.

5:55Ścieżka nie zmieni swojego kształtu, ale zupełnie w innym położeniu

5:59będzie jej początek i koniec.

6:01Czyli teraz ten węzeł będzie traktowany jako koniec, a ten jako początek, a

6:05nie odwrotnie, tak jak jest teraz.

6:07I teraz widzimy, że ok.

6:08No i widzimy, że teraz wszystkie te obrysy podążają dokładnie w tym samym

6:12kierunku, czyli od naszej monety ok.

6:15I one teraz wypełniły się na 100%.

6:18Dokładnie tak jak mamy tutaj przy wartości ENT, ale chciałbym żeby teraz zniknęły,

6:21czyli po prostu żeby odjechały w tamtą stronę.

6:23Dlatego wybierzemy sobie wartość start stop łącz i przejdziemy np.

6:2910 klatek do przodu i tu ustawimy sobie 100% i widzimy, że one

6:32teraz ładnie nam znikają.

6:34Zobaczmy jak wygląda ta animacja.

6:46OK. A teraz zróbmy jedną, jeszcze jedną rzecz.

6:48Zaznaczmy tylko te klatki kluczowe dla wartości start i przybliżymy je tutaj do

6:53początku naszej animacji, tak żeby one zachodziły troszkę na wartości na

6:56te klatki kluczowe dla wartości end. I zobaczmy teraz.

7:02Bardzo fajnie.

7:03Teraz te linie są troszeczkę krótsze i nie wypełniają.

7:07Te obrysy są troszkę krótsze i nie wypełniają całej ścieżki wektorowej.

7:12Jeszcze jedna rzecz mamy tutaj Trim Multiple Shape.

7:16W naszym przypadku tych kształtów jest ich liczba wynosi 4.

7:20I mamy tutaj symulowany.

7:22Jeśli ustawimy sobie indywidualnej, to wszystkie te linie będą animować się

7:27indywidualnie, czyli najpierw jedna, potem druga, trzecia i na końcu czwarta.

7:31W naszym przypadku chodzi o Lepiej wygląda wartość tej szansy ustawiona na więcej.

7:39I myślę, że wygląda to znacznie lepiej.

7:44Możemy to jeszcze troszeczkę przyspieszyć.

7:46Czyli zaznaczmy te skrajnie końcowe klatki kluczowe po prawej

7:52stronie i teraz mamy więcej energii w tej animacji.

8:00Czy dodawać tutaj ISIS?

8:02A może dodajmy do.

8:06Tej ostatniej klatki kluczowej?

8:09Wybierzmy sobie klawisz Function, a następnie F9.

8:13Możemy jeszcze popracować tutaj z edytorem i jeszcze to

8:17troszeczkę wydłużyć, tak żeby.

8:22Tutaj ten ruch na końcu spowolnił dosyć mocno.

8:26A i teraz wygląda to bardziej dynamicznie moim zdaniem.

8:38Pięknie. Dokładnie o coś takiego mi chodziło.

8:41W porządku. No i cóż.

8:43Wyjdźmy z Graph Editor, a możemy sobie zwinąć tą warstwę.

8:46W zasadzie wszystkie warstwy możemy sobie zwinąć i myślę, że możemy uznać, że

8:51ta nasza animacja jest już gotowa i warto teraz wyeksportować pierwszy plik LOD.

8:57I dlatego koniecznie zapiszmy zmiany Failsafe, ewentualnie Command s lub

9:03Control s, jeśli pracujesz z Windowsem. A no teraz to wszystko.

9:06W tej lekcji zapraszam Cię na krótką przerwę i uczymy się refleksji następnej.

9:11Gdzie eksportujemy pierwszy plik LOD?