Projektuj Animacje UI z Lottie Files i After Effects: Eksport do Lottie i sprawdzanie błędów

0:00W tej lekcji zajmiemy się czyszczeniem projektu.

0:02I o ile sam design całej animacji jest gotowy i wszystko

0:08przebiega tak jak należy, to musimy wyczyścić projekt z elementów, które

0:12nie będą akceptowane przez format LOD.

0:15I tak jak w poprzedniej lekcji zapowiedziałem, część rzeczy trzeba

0:19przekonwertować na ścieżki wektorowe.

0:21Tutaj mam na myśli warstwy z Illustratora i to są dokładnie te warstwy, które

0:25tutaj symbolizują te animacje czatu.

0:28I one są tutaj.

0:31To jest kompozycja conversation.

0:33Problem, który chciałbym teraz przedstawić, już omawialiśmy wcześniej,

0:36ale warto o tym przypomnieć, żebyśmy po prostu uniknęli jak najwięcej.

0:42Uniknęli jak najwięcej niepotrzebnych procesów, nad którymi

0:47musielibyśmy spędzić trochę czasu.

0:49Jeśli zaznaczę pierwszą z brzegu warstwę, np.

0:52tą z gór ze skali Two next available slot i to jest ta warstwa i ja konwertuje ją na

1:00shape wektorowy, czyli prawy klawisz myszy, a następnie Create

1:03shape from vector layer.

1:04Jak zawsze to tutaj mamy całą masę grup.

1:09Każda grupa odpowiada za osobną literę, ale skoro nie animuje tych

1:15tych liter w tym przypadku akurat to one nie muszą być rozłożone, każda

1:20na osobnej grupie wektorowej.

1:22Bo jeżeli ja teraz piszę sobie tutaj mangę, to zwróćmy uwagę ile mamy

1:26tutaj megabajtów do usunięcia.

1:31Cała masa i każdy z tych etapów musimy zaznaczyć osobno.

1:35A to oczywiście wpływa na czas pracy, jaki musimy poświęcić, więc

1:40wybierzmy romans i to co teraz warto zrobić, to po prostu otworzyć

1:44sobie to ilustratorzy.

1:46Edit Original I tutaj wystarczy, że zaznaczymy sobie

1:52ten obiekt tekstowy i wybierzemy Object Component Path i wybierzmy Make.

1:58Możemy też skorzystać ze skrótu klawiszowego Command 8 lub Control

2:018, jeśli pracujemy z Windowsem.

2:03I jeśli teraz zapiszę zmiany command s i wracam do after a,

2:08to teraz jeśli znowu wezmę sobie tą warstwę i zamienie ją znowu prawy klawisz

2:13myszy Create shape from vector layer.

2:16Kształty wektorowe.

2:17To teraz zwróćmy uwagę, że mam tutaj tak naprawdę tylko jedną grupę.

2:24Kształtów, jedną grupę wektorową i w tej grupie jest cała masa kształtów.

2:28Każdy z tych kształtów odpowiada za literkę, Ale jeżeli teraz wpiszę sobie

2:33tutaj w wyszukiwarkę Merge, to mamy tylko dwie merge pass do usunięcia, co

2:39oczywiście wpływa znacząco na czas pracy, jaki musimy poświęcić nad tym projektem.

2:46I tutaj jeśli wpiszemy sobie jeszcze group, to też mamy jedną dodatkową grupę

2:50ułożoną kaskadowo, którą musimy usunąć.

2:53I to jest w zasadzie wszystko, co trzeba zrobić z tą warstwą.

2:56I oczywiście to samo trzeba zrobić z każdą z tych warstw ilustratorzy, czyli

3:02zaznaczyć sobie każdą z tych warstw, która zawiera całą masę elementów wektorowych,

3:07takich jak właśnie warstwy z tekstem.

3:09Czyli zaznaczamy warstwę i wybieramy Command 8 lub Control 8 albo ewentualnie

3:13Object Component i Make i wtedy zapisujemy nasz plik.

3:19Wracamy do Illustratora i teraz to co ja muszę zrobić to oczywiście

3:23pozamieniać te warstwy, które należy zamienić na shape wektorowe.

3:28Poza tymi bitmap owymi awatarami oczywiście.

3:32Czyli to już jest zamienione, to jeszcze nie.

3:37I znowu create shape from vector layer.

3:40I tutaj też możemy się upewnić, że mamy tylko jedną grupę.

3:45Cała grupa ma całą masę ścieżek wektorowych

3:48i mamy tylko jedną dodatkową grupę, którą usuwamy i wpisujemy jeszcze match path i

3:55też możemy sobie to usunąć w ten sposób.

4:00Więc ja teraz po prostu po zamieniam te warstwy.

4:03Zrobię to na szybko, zrobię to w przyśpieszeniu, bo to jest cały

4:07czas zestaw tych samych operacji.

4:09Nie chcę Cię też zanudzać.

4:11Dlatego słyszymy się ponownie za sekundkę.

4:49No i ok, wracam do Ciebie.

4:52Wszystko zostało pozmieniane, ale pamiętajmy, że nasza kompozycja,

4:57główna kompozycja składa się z kilku jeszcze dodatkowych kompozycji

5:01i też we wszystkich musimy sprawdzić, czy nie ma jakichś dodatkowych elementów,

5:04które należy usunąć, czyli tzw.

5:07dodatkowych wewnętrznych grup i merge path.

5:12Przejdziemy do kompozycji o nazwie Empty i tutaj wpiszemy merge.

5:17OK, wygląda na to, że kilka etapów mamy do usunięcia, ale nie jest ich dużo,

5:22więc możemy to zrobić teraz.

5:30Super!

5:32I zobaczmy jeszcze, czy mamy jakieś dodatkowe grupy.

5:39Wygląda na to, że tu jest wszystko ok.

5:42Mamy jeszcze czyli kompozycję Conversation oraz Empty.

5:46Mamy sprawdzone.

5:47Mamy jeszcze do sprawdzenia kompozycję Existence i tutaj sprawdźmy,

5:53czy mamy Edge Pass.

5:54Jakieś ale nie widzę.

6:00I zobaczmy też, czy mamy jakieś dodatkowe grupy.

6:03Ale też tutaj jest.

6:06Czysto, w porządku i mamy jeszcze kompozycję drop down menu.

6:13I tutaj też sprawdźmy, czy mamy jakiś match up, ale nie widzę.

6:19I jeszcze dodatkowo grupy ułożone kaskadowo.

6:22Czy są jakieś.

6:25Też ich nie widzę.

6:26Czyli wygląda na to, że nasz projekt jest czysty.

6:28Wyłączmy kompozycje, których nie będziemy renderować, tak żebyśmy mieli tutaj

6:32porządek, ponieważ będziemy renderować tylko tą główną naszą kompozycję.

6:36Alias Main Animation, czyli to nad czym pracowaliśmy tutaj w poprzednim rozdziale.

6:43Wszystko animuje się bardzo, bardzo dobrze.

6:47Zapiszmy zmiany przede wszystkim i przechodzimy do kolejnego kroku.

6:51No i ok, nadchodzi wiekopomna chwila.

6:53Wybierzmy sobie tutaj refresh w panelu LOD I Files i będziemy oczywiście renderować

6:58kompozycję alias Main Animation.

7:01Zaznaczmy ją, a następnie przejdźmy do ustawień.

7:05I pamiętamy, że mamy jedną małą ekspresję w naszej animacji, która steruje

7:11ruchem tej delikatnej poświaty tutaj.

7:14Więc przejdźmy do Expression i upewniam się, że mam zaznaczony Convert expression

7:19to keep frames, tak aby aby ta ekspresja została zmieniona na

7:25klatki kluczowe, które będą sterować pozycją tego elementu.

7:29Następnie wiemy, że w naszych kompozycjach znajdują się też

7:34bitmapy, czyli te małe avatary i też musimy upewnić się, że są one, że będą one

7:41osadzone w naszych plikach, więc wybieram include.

7:44OK, extra też mamy zaznaczone.

7:47Wybieram save, a następnie przechodzę do renderowania tej animacji.

7:53Ona pewnie będzie renderować się trochę dłużej niż nasza moneta

7:56z poprzedniego rozdziału.

8:00I faktycznie tak jest.

8:01Musimy odczekać aż tutaj będziemy mieli 100%.

8:18I zobaczmy jak to się prezentuje.

8:21Jeśli chodzi o wagę naszego pliku to docelowo waży zaledwie 495 KB.

8:28To jest bardzo mało.

8:30Oczywiście jest to więcej niż nasza moneta, ale pamiętajmy, że mamy tutaj też

8:33bitmapy i dużo więcej obiektów wektorowych.

8:36Natomiast w dalszym ciągu jest to dużo mniej niż np.

8:40jakiś GIF albo albo MP czwórka.

8:44Np.

8:45Możemy też pobrać sobie Optimizer Odloty, który waży 311 KB.

8:49Jeszcze mniej.

8:51OK, ale to co mnie najbardziej interesuje na tym etapie to czy mamy jakieś błędy i

8:55widzimy, że tutaj mamy informację, iż u found możemy zobaczyć.

9:01Jakie tutaj features zostały wykorzystane.

9:05Wszystko świeci nam się na zielono. Świetnie!

9:07O to dokładnie nam chodzi.

9:10I teraz to co ja chciałbym zrobić to oczywiście zapisać sobie tą animację na

9:14moim dash boardzie, czyli wybieram Save the workspace, Workspace, wybieram

9:19Web kurs, a następnie wybieram Upload.

9:24I nasza animacja jest już zapisana w moim dashboard.

9:29Wszystko tutaj wyświetla się bardzo ładnie, możemy sobie ją podejrzeć.

9:35No i super!

9:36Wszystko tutaj wyświetla się dokładnie tak jak zaprojektowaliśmy.

9:39Ruch jest płynny, wszystkie tutaj hover działają.

9:50Tekst animuje się bardzo dobrze.

9:52Przy tym było najwięcej pracy.

9:54Czas też animuje się dobrze.

9:56Wpisywanie tekstu jak najbardziej.

10:09Super!

10:11No i koniec.

10:13Więc to wszystko w tej lekcji.

10:16Nasze zadanie zostało wykonane na 100%.

10:19Teraz oczywiście kwestia osadzenia tego na stronie i wykorzystamy do tego web flow.

10:26Ale tym oczywiście zajmiemy się po przerwie, na którą serdecznie Cię

10:28zapraszam i do usłyszenia w następnej lekcji.