Projektuj Animacje UI z Lottie Files i After Effects: Alternatywa dla Mask Path

0:00Jesteśmy na stronie Lost Files.

0:02COM support Features.

0:04I tutaj mamy całą listę funkcjonalności Adobe After Effects, które

0:09są wspierane przez format LOD oraz gdzie niektóre funkcjonalności nie są wspierane.

0:17W jakich, na jakich platformach.

0:20No i np.

0:21mamy tutaj podzielone na kategorie Shape wypełnienia, obrys, a transformacje.

0:31Interpolacja, czyli tzw.

0:35missing klatek kluczowych.

0:37Maski i widzimy, że Mask Path jest jak najbardziej.

0:43Wspierany przez format loci, czyli nasza wektorowa maska powinna działać.

0:49I tutaj wszystko jest OK.

0:51Natomiast Mask Expansion widzimy, że tutaj już nie jest wspierany

0:56na niektórych platformach na Androidzie, iOS

0:59i w zasadzie moglibyśmy pominąć ten komunikat o błędzie, bo tego Mask

1:05Expansion w żaden sposób nie wykorzystujemy.

1:08Ale ja tak naprawdę staram się, żeby tutaj nie było żadnych informacji o błędach.

1:14Dlatego zastanówmy się teraz, w jaki sposób możemy tutaj zastosować

1:19inaczej taką maskę.

1:21Mamy tutaj coś takiego jak MEC i alfa med.

1:25Jest to rodzaj maski w oparciu o inną warstwę, czyli o kanał alpha danej warstwy

1:33i widzimy, że to jest świetnie wspierane tutaj na wszystkich platformach.

1:37Dlatego spróbujmy może pokusić się właśnie o takie rozwiązanie.

1:42Jak możemy to zrobić?

1:44Stworzymy sobie nową warstwę, która będzie miała dokładnie kształt naszej maski

1:49i wykorzystamy kanał alpha tej warstwy.

1:52Więc wróćmy teraz do aplikacji Adobe After Effects.

1:56Mamy tutaj naszą maskę Mask Path i to co ja chciałbym zrobić, to skopiować sobie

2:01ten kształt wektorowy, który tworzy naszą maskę, czyli po prostu

2:04zaznaczamy Mask path.

2:06Następnie możemy wybrać Command C lub Ctrl+C, jeśli pracujemy na Windowsie.

2:11I teraz ja stworzę nową warstwę.

2:12Będzie to Layer New, a następnie Shape Layer, czyli warstwa kształtu.

2:19I teraz dodajmy do tej warstwy kształtu jakiś obiekt wektorowy.

2:24W zasadzie jakikolwiek.

2:26Może to być np. elipsa.

2:28Możemy sobie ją narysować tutaj w ten sposób.

2:32Następnie tą elipsę zamienimy na.

2:36zwykłą ścieżkę wektorową, czyli convert bez r paf.

2:39OK, to sobie możemy np.

2:43nazwać.

2:46Group.

2:48OK.

2:48I tutaj będę chciał po prostu wkleić sobie do tej ścieżki te klatki kluczowe, które

2:54skopiowałem sobie z naszej maski, czyli po prostu zaznaczmy je sobie i

3:00jeszcze raz command C lub Ctrl+C.

3:04I tutaj wybieram PAF.

3:06Następnie rozwijam, klikam tutaj na PAF i wklejam.

3:09No i widzimy, że mamy teraz dokładnie takie same klatki kluczowe

3:14jak narysowane na naszej masce.

3:17Wygląda na to, że wszystko tutaj działa świetnie.

3:19No i teraz po prostu możemy sobie ten kształt wektorowy, który tak pięknie

3:23animuje wykorzystać jako kanał alpha dla.

3:28Tutaj dla tego naszego kon profil, czyli ta maska teraz

3:33już nie jest nam tutaj potrzebna.

3:34Możemy sobie ją usunąć.

3:36I widzimy, że teraz nasz koń profil nie ma, nie jest maskowane, ale

3:41wykorzystamy właśnie kanał Alpha.

3:44Z tego Shape Layer 1 możemy wybrać Enter i nazwiemy to Alpha Mask.

3:55Alpha Mask OK.

3:58I teraz możemy tutaj w panelu z warstwami z naszą linią czasu przełączać się.

4:11Między trybami. To co mnie interesuje to track med.

4:23I dla tej warstwy koń profil.

4:26Po prostu pociągniemy sobie track med.

4:29Do tego do tej warstwy z naszym białym kształtem, z naszym białym kowalem, aby

4:34ona została potraktowana jako kanał alfa.

4:37No i zobaczmy jak to teraz wygląda.

4:39Wygląda to dokładnie tak samo jak wcześniej.

4:41Nic się tutaj wizualnie nie zmieniło.

4:47Dlatego teraz wybierzmy sobie w panelu LOT I Files Bak, a następnie jeszcze raz

4:53wygenerujemy naszą kompozycję.

4:55Jak widzimy tutaj wszystko wygląda dokładnie tak samo jak wcześniej.

4:59I teraz wybieram strzałkę.

5:03Czekam aż nam się to wygeneruje.

5:04No i mamy błąd.

5:06Widzimy, że teraz ten profil naszej monety w ogóle zniknął.

5:09Nie ma go tutaj zupełnie, więc wygląda to zupełnie nie tak jak oczekiwałem.

5:17I tutaj mały trik żeby to zadziałało.

5:22To ta warstwa, która jest kanałem alpha dla naszej,

5:27dla naszego profilu monety musi być bezpośrednio nad tym właśnie profilem.

5:31Czyli te warstwy muszą być obok siebie.

5:34I teraz wybierzmy Command s.

5:37I teraz znowu przechodzimy do pluginu LOD I Files i wybieram strzałkę, aby

5:41wyrenderować naszą kompozycję i ram.

5:44Teraz już działa i wszystko wygląda dobrze.

5:47Możemy zobaczyć czy też nie mamy żadnych problemów, tutaj żadnych błędów.

5:51Jeżeli przejdziemy sobie tutaj niżej do Features Support Checker, to widzimy

5:55informację, iż u found, czyli nie znaleziono żadnych błędów.

5:59No i teraz.

6:02Teraz przechodzimy do tej sekcji download i myślę, że możemy sobie teraz.

6:10Wybrać Save Workspace i myślę, że możemy sobie stworzyć nowy folder.

6:17Może nie tutaj, a bezpośrednio na moim workspace wybieram

6:22New Folder i nazwiemy go np.. Web.

6:26Kurs.

6:27OK, tutaj będziemy ładować wszystkie te animacje, które tworzymy w ramach

6:30naszego kursu i Save Project.

6:36Zaznaczam folder i wybieram upload.

6:45W porządku.

6:45Animacja została załadowana do mojego Dashboard u.

6:49Możemy sobie ją pobrać.

6:50Widzimy, że waży ona naprawdę niewiele.

6:52Przejdźmy do przeglądarki internetowej.

6:54Ja tutaj już jestem zalogowany, więc możemy przenieść się do mojego dashboard

6:57i odnaleźć sobie folder Web Kurs.

7:10I mamy tutaj naszą animację, która działa i wyświetla się bardzo dobrze.

7:15Klikam na nią i przechodzimy do detali związanych z tą animacją.

7:20Możemy sobie ją przyspieszyć.

7:24Np. w ten sposób.

7:25Jako, że jest ona wektorowa, to jest w pełni skalowalna, więc możemy sobie ją

7:30powiększać do woli, nie tracąc w żaden sposób jakości.

7:34Wszystko tutaj działa super fajnie.

7:36Możemy sobie przejść do presetów związanych z paletą kolorów,

7:39zmienić zupełnie kolorystykę naszej.

7:43Naszej monety, więc mamy tutaj pełną dowolność

7:46jeśli chodzi o o pracę z kolorem.

7:53Możemy przejść do.

7:58Informacji na temat naszej animacji.

8:01Mamy tutaj możliwość.

8:05Załadowania pliku After Effects Mamy Feature Support checker.

8:11Nie mamy tutaj żadnych błędów, wszystko wyświetla się na zielono.

8:14Dokładnie o coś takiego nam chodziło.

8:16Mamy rozmiary kompozycji, framerate.

8:18Jak długo trwa nasza animacja?

8:20Ile ma łącznie?

8:22Ile łącznie ma wszystkich klatek?

8:24Natomiast w przypadku naszej animacji i w ogóle w przypadku animacji LOT i w

8:29zasadzie ta ilość klatek na sekundę chyba nie ma znaczenia, bo ta animacja, jak

8:33wszystkie animacje LOT są wyświetlane tak płynnie, że nie jesteśmy w stanie

8:36tych klatek tutaj zauważyć.

8:37One wyglądają tak, jakby miały minimum 60 klatek klatek na sekundę.

8:43No i ok.

8:44Jeśli chodzi o tą naszą animację, to w zasadzie tutaj wszystko jest gotowe.

8:49Możemy.

8:52Sobie ją pobrać, możemy udostępnić link czy ewentualnie

8:59pobrać ją jako plik docelowy i wysłać do dewelopera, który pracuje nad

9:06wdrażaniem, wdrażaniem strony internetowej czy

9:10interfejsu, dla którego stworzyliśmy tę ikonę.

9:12Albo jeżeli np.

9:13korzystamy z web Flow, to możemy sami osadzić taką animację

9:17na stronie internetowej.

9:18Ale jeśli chodzi o Web Flow w tym rozdziale na razie ten temat zostawimy.

9:22Myślę, że potraktujemy to troszeczkę jako nieco taką wisienkę na

9:26torcie, więc przeniesiemy to troszeczkę na bardziej finałową część tego szkolenia.

9:31A na teraz w tej lekcji to wszystko możemy śmiało przejść do lekcji następnej, do

9:36której naturalnie serdecznie Cię zapraszam.

9:38Do usłyszenia po przerwie.