Projektuj Animacje UI z Lottie Files i After Effects: Kompozycja w kompozycji

0:00No dobrze, skoro nasza moneta już się obraca, to pójdźmy teraz o kilka kroków

0:04dalej i stwórzmy coś w rodzaju kompozycji w kompozycji.

0:07Jako, że mamy już naszą kompozycję z monetą gotową, to możemy wykorzystać

0:11tę monetę w innej kompozycji.

0:12Dlatego możemy wybrać Competition, a następnie Nuke Position i stworzyć sobie

0:18nową kompozycję z innymi ustawieniami.

0:24Albo możemy też tą naszą kompozycję z monetą, która się obraca przeciągnąć

0:30sobie do ikonki create new composite.

0:34I teraz mamy nową kompozycję.

0:37Możemy zmienić jej nazwę, np.

0:39wybierzmy prawy klawisz myszy, a następnie My Name, a nazwiemy ją Jump.

0:44I chciałbym, żeby tutaj w tej kompozycji o nazwie Jump ta nasza kompozycja z monetą,

0:50żeby coś się z nią działo.

0:51Chciałbym, żeby ta moneta np. podskakiwała.

0:54Czy możemy tak zrobić? Pewnie, że możemy.

0:58Jedyny problem jaki tutaj jest to ta moneta.

1:01Się obraca przez 24 klatki, a potem znika.

1:05Dlatego ja proponuję, żebyśmy sobie tutaj cięli tą naszą naszą monetę.

1:11Wybierzmy jeszcze command de.

1:15I przesuniemy tą drugą część nieco dalej.

1:18I w ten sposób mamy ciąg dalszy, który teraz trwa dwie sekundy.

1:28OK, myślę, że tutaj, w tym miejscu możemy sobie.

1:36Zakończyć odtwarzanie.

1:37Czyli skrócę sobie tę linię tak, aby tutaj właśnie.

1:42Nam się.

1:47Kompozycja kończyła i zapętla.

1:53W porządku.

1:54Teraz chciałbym, żeby nasza moneta podskoczyła i opadła, czyli

1:59po prostu żeby podskakiwała.

2:00Czy możemy coś takiego zrobić? Oczywiście, że możemy.

2:04Proponuję, żebyśmy skorzystali z tzw.

2:06null object, czyli będzie to obiekt, któremu nadamy właśnie taki efekt skoku.

2:13I do tego efekt.

2:14Do tego obiektu będą podpięte obie te kompozycje z monetą, tak żebyśmy nie

2:19musieli tych klatek kluczowych rysować dwa razy tutaj, a potem tutaj.

2:23Dlatego wybieram Layer, następnie New i wybierzmy sobie NULL Object.

2:30NULL Object został dodany na środek naszej.

2:35Naszej kompozycji, ale przeniesiemy go tutaj na dół monety w tym miejscu.

2:40Myślę, że to będzie dobra pozycja, a następnie te nasze dwie monety, te

2:46dwie kompozycje z monetami do parent.

2:49My dotkniemy tutaj do null object.

2:52I teraz jeżeli ja będę ruszał null obiektem, to widzimy, że

2:56razem z nim ruszają się nasze monety.

2:59Jeżeli ja będę skanował null object.

3:02No to widzimy, że monety też się skalują.

3:06W porządku.

3:07Dlatego będziemy teraz pracować z sekcją Transform, czyli będziemy

3:12po prostu zmieniać pozycję.

3:14W tym miejscu myślę, że byłoby fajnie, gdyby moneta sobie podskoczyła.

3:18Natomiast ma ona za mało miejsca, więc przeniesiemy ją troszkę na dół.

3:23Tutaj nasza moneta podskoczy do góry.

3:27OK.

3:29I tu znowu.

3:32Opadnie.

3:33Czyli możemy skopiować sobie tą klatkę command C i dać command V.

3:39Jak to wygląda?

3:43Troszkę słabo, prawda?

3:44Myślę, że będzie lepiej jeśli do tej klatki

3:48kluczowej dodamy sobie leasing, a możemy to zrobić z pomocą klawisza

3:55funkcyjnego czyli F9.

3:58Na Maku muszę wcisnąć klawisz Function, a następnie F9.

4:02I teraz tutaj nasza moneta troszkę zwolni i tu przyśpieszy żeby opadać.

4:09Wygląda to w ten sposób, ale możemy jeszcze sterować prędkością naszej monety.

4:16Wybierzemy sobie tzw.

4:17Graph Editor i tu.

4:22Upewniamy się, że pracujemy nad edycją prędkości, czyli

4:27wybieramy prawy prawy klawisz myszy, a następnie upewniamy się, że

4:30mamy tutaj Edit Speed Graph.

4:33Tutaj możemy te wąsy rozciągnąć w taki sposób, że nasza moneta

4:38szybko wyskoczy w górę.

4:39tutaj zwolni i znowu przyśpieszy i szybko opadnie na dół.

4:44Czyli będzie to wyglądać w ten sposób.

4:49Widzimy, że ten ruch już jest bardziej naturalny, prawda?

4:53Zobaczmy.

5:06Wygląda znacznie lepiej.

5:07Ale jeszcze jedną rzecz chciałbym tutaj zrobić.

5:10Wyjdźmy z Graph Editor, a będziemy jeszcze z niego korzystać.

5:14To co ja chciałbym zrobić, to jeszcze pracować.

5:16Chciałbym jeszcze pracować ze skalą, czyli chciałbym skalować naszą monetę w

5:20momencie, kiedy nasza moneta leci do góry.

5:25Chciałbym, żeby może w jakiś sposób się rozciągnęła, a w momencie kiedy uderza

5:33w ziemie chciałbym żeby się spłaszczyć.

5:35Czyli możemy np.

5:36tutaj naszą monetę spłaszczyć.

5:40Jeżeli ja będę skanował teraz naszą monetę, jeżeli powiększy sobie jej

5:46wysokość, to automatycznie powiększa się też szerokość, dlatego, że mamy te

5:49dwie wartości spięte tym łańcuszkiem.

5:51Wystarczy, że je odetniemy.

5:53I tutaj chciałabym, żeby nasza moneta się spłaszczyć troszkę i rozciągnęła.

6:00OK, ustawimy sobie stop watch, czyli tu mamy pierwszą klatkę kluczową.

6:08W momencie kiedy nasza moneta.

6:12Jest u góry, no to chciałbym, żeby miała swoje naturalne wartości,

6:15czyli 100 oraz 100.

6:19OK.

6:24W porządku.

6:27Tutaj kiedy opada to chciałbym, żeby nasza moneta była, żeby wyglądała

6:32troszkę inaczej, czyli np. żeby.

6:37Była troszkę spłaszczona po szerokości i wydłużona po wysokości.

6:47I tu w momencie kiedy uderza w ziemie jest spłaszczona.

6:54Tam klatkę kluczową musimy sobie skopiować i przerzucić tutaj.

7:01Oraz tą też sobie skupujemy i damy ją tutaj.

7:11I teraz nasza moneta wygląda bardzo fajnie i mięciutko.

7:15Wydaje mi się, że warto dodać desing do tej środkowej klatki, więc

7:18wybieram function i F9.

7:36Ale to nie wszystko.

7:37Dodajmy jeszcze jedną rzecz, która wydaje się dosyć istotna.

7:41Możemy sobie włączyć widok transparentny, ponieważ nie mamy

7:44żadnego background tutaj.

7:47Na pewno zapiszmy sobie zmiany i to, co ja jeszcze chciałbym zrobić,

7:51to jakiś cień pod naszą monetą.

7:52Ale to myślę, że jest temat na kolejną lekcję, więc zróbmy sobie teraz

7:58chwilę przerwy i do usłyszenia za chwilkę.