Projektuj Animacje UI z Lottie Files i After Effects: Dashboard

0:00Wracamy na stronę Los Files Kropka.

0:02COM Kolejna animacja w sekcji Hiro nam się tutaj wyświetla i jest bardzo fajnie

0:08przemyślana, ponieważ w bardzo fajny sposób się zapętla.

0:12Natomiast teraz chciałbym, żebyśmy się skupili bardziej na tym, co

0:15tutaj jest do naszej dyspozycji.

0:18Poza produktami integracji mamy też pricing, który determinuje tutaj

0:28poniesienie kosztów z racji korzystania z LOT i failsafe.

0:33Natomiast na potrzeby tego kursu myślę, że wystarczy Ci wersja darmowa.

0:38W wersji darmowej możesz wyeksportować 10 animacji.

0:45Myślę, że nie będziemy robić ich aż tak dużo w tym szkoleniu.

0:49Natomiast ja mam wykupioną wersję indywidualną.

0:55Mam tutaj nielimitowaną ilość plików, logi które mogę sobie

0:59upload ować i eksportować.

1:02Mam i mam dostęp do lot i kreatora lot i edytora.

1:06Powiem oczywiście co to jest.

1:09Możemy sobie tutaj pobierać zoptymalizowane pliki loty mamy hosting,

1:16eksport do różnych formatów takich jak GIF, MP4 itd.

1:20Możemy nasze pliki wyeksportować sobie właśnie do tychże formatów.

1:24Mamy bardzo dużą bibliotekę plików Lotus, które są na bieżąco, która

1:32to biblioteka jest na bieżąco uzupełniana.

1:34Tam są materiały, które są płatne, czyli pliki, które możemy sobie kupić.

1:39Ale jeżeli mamy ten plan indywidualny wykupiony, no to one są w ramach tego

1:43planu i możemy je wtedy bez problemu sobie pobrać, wykorzystać w naszych projektach.

1:48Jest to też biblioteka, która jest uzupełniana przez projekty

1:52społeczności użytkowników floty.

1:55Czyli jeżeli jeżeli stworzymy jakąś animację, możemy ją

2:00udostępnić publicznie w tej bibliotece, tak aby inni mogli z tego korzystać.

2:06Następnie mamy też dostęp do naszego konta Loot I Files przez firmę Web Flow kanwę.

2:15Więc też na poziomie tych aplikacji możemy pracować sloty.

2:20My będziemy pracować głównie z Adobe After Effects.

2:23Będzie nam potrzebny plugin, ale do tego też przejdziemy w odpowiednim czasie.

2:28Natomiast jeśli chodzi o produkty mamy tutaj do dyspozycji loty Files

2:33Platform, czyli platformy, na której w zasadzie za chwilę, do której za

2:36chwilę przejdziemy oraz LOD i Creator. LOD i Creator.

2:40Jest to przeglądarkowa aplikacja zbudowana specjalnie dla LOD i Falls.

2:46Jest to taki okrojony program do tworzenia animacji LOD i bardzo prosty podstawowy.

2:53Dużo tam jest takich basic owych narzędzi.

2:56No ale my chcemy tworzyć bardzo ładne pliki LOT i jednocześnie

3:00nauczyć się podstaw after.

3:01A więc będziemy korzystać z After Effects LOT I Files Platform, czyli

3:06cała platforma, na której w której będziemy obracać się

3:10tworząc nasze konto na LOT I files Apple, budując i pobierając pliki

3:15czy korzystając z biblioteki.

3:18I wystarczy, że po prostu kiedyś stworzymy sobie konto?

3:21Ja tutaj jestem już zalogowany.

3:23Możemy przejść do naszego Dashboard u.

3:28I tutaj mamy już nasze animacje.

3:30To są animacje, nad którymi ostatnio, nad którymi ostatnio pracowałem.

3:34Ta animacja pochodzi z biblioteki, nie jest moja, ale np.

3:38ta animacja jest moja.

3:39Jest to bardzo fajny przykład animowanego interfejsu, jak również również ta.

3:45Zaraz sobie ją przejrzymy.

3:47Jeśli klikniemy na jedną z takich animacji np.

3:50na tą to przechodzimy do tzw.

3:53LOD i edytora, gdzie możemy np.

3:57pobrać tą animację jako plik JSON albo zoptymalizowany plik Jameson, który

4:03jest nieco skompresowany, ale nie wpływa to w żaden sposób na jakość i waży on

4:07w zasadzie niewiele mniej, bo ten waży.

4:11JSON waży 65 KB, a ten 52.

4:16I mamy też format loty do melodii, który w tym przypadku jest dużo lżejszy 6 KB albo

4:22zoptymalizowany format LOT i waży tylko 5 KB, więc jak widzimy

4:28jest to dosyć lekka animacja.

4:31Jest ona lekka z uwagi na to, że jest zbudowana z kształtów wektorowych i

4:37jest tych kształtów tutaj bardzo mało.

4:40Ale możemy też pobrać sobie tą animację jako gif np.

4:45albo mp4.

4:47Mamy też Source File.

4:48W tym przypadku jest to plik Adobe After Effects, który możemy pobrać,

4:53ale możemy też np.

4:55dodać sobie komentarz czy ewentualnie czy ewentualnie uzyskać informacje

5:00na temat tej animacji.

5:01Możemy zobaczyć jakie.

5:05Ficzery są tutaj użyte i czy są wspierane przez format melodii.

5:10Jeżeli któryś z tych ficzerów jest nie wspierany

5:14to niestety będziemy mieli czerwonego X, ale wygląda na to, że z tą

5:17animacją wszystko jest w porządku.

5:19Nasze animacje też będziemy testować i sprawdzać pod tym pod tym kątem.

5:24Mamy tutaj też kolory, jakie są wykorzystane w tej animacji.

5:31Możemy przejść do palety kolorów i np.

5:33zmienić ją np.

5:35na taką czy na taką albo na taką, czy ewentualnie stworzyć sobie

5:41nową paletę, a potem ją zachować.

5:44I ewentualnie jeśli już dokonamy jakiejś zmiany w naszej animacji, to możemy wybrać

5:49Save animation i ta animacja będzie już zapisana.

5:54Możemy zmienić nazwę.

6:04I zapisać jako nową animację po to, aby nie nadpisać tej, która już

6:09istnieje na naszym koncie.

6:13Zapiszemy sobie ją w folderze Inspiration. Wybieram save.

6:21OK.

6:22Animacja została zapisana i teraz jeżeli wrócimy do naszego dashboard

6:27to zobaczymy, że mamy tutaj dwie animacje.

6:30To jest oryginał, a to jest nasza wersja nieco z edytowana w

6:34podobnych, ale troszkę ciemniejszych kolorach.

6:41Jeszcze raz to przejdźmy.

6:42Poza kolorem mamy jeszcze historię wersji, jeśli jest taka dostępna.

6:46Jeśli mamy tutaj jakieś zmiany, to oczywiście

6:50mamy informację o tym, kiedy zostały one, kiedy one zostały wprowadzone.

6:55Minutę temu wprowadzaliśmy tutaj zmiany.

6:57Mamy ewentualnie Head OF i MBT.

7:00Możemy skopiować sobie kod do ładowania, ale również możemy sobie

7:07zaimplementować te animacje na iOS i Androidzie czy Web Flow.

7:12Dodatkowo mam tutaj jeszcze możliwość pokazania Bound Boxa, czyli

7:17granic naszej animacji.

7:18Ta animacja nie ma być grindu, ona jest transparentna, ale background

7:22możemy sobie zawsze dodać np.

7:25niebieski i wybrać update.

7:30Teraz tylko musimy wyłączyć background transparentny i widzimy, że ten kolor,

7:36który daliśmy został już wrzucony.

7:38Możemy sobie wyłączyć boutique box tak, aby był niewidoczny.

7:45Możemy włączyć sobie fullscreen. Screen.

7:48Następnie Escape, wychodzimy z full screena i mamy jeszcze możliwość

7:52powiększenia tej animacji czy pomniejszenia.

7:55Z racji, że jest ona oparta o wektory czy pliki SVG to nie będziemy mieli

8:03tutaj żadnej straty jakości.

8:05Możemy ją dowolnie zmniejszać i je powiększać.

8:08Możemy też sobie ją przyśpieszyć np. dwukrotnie.

8:17Czy zwolnić?

8:19Możemy sobie wyłączyć odtwarzanie w pętli, czy ponownie je włączyć?

8:26OK. Wracamy do Dashboard.

8:27U.

8:36Pokażę Ci animację interfejsu taką, jaką widzieliśmy na przykład na

8:43głównej stronie produktowej firmy, gdzie poruszają się kursory i

8:48przestawiają jakieś elementy.

8:52Podobne animacje wykonywałem i tutaj.

8:55Jeśli przejdziemy do odpowiedniego folderu, to będziemy mieli kilka.

9:01przykładów. Oto jeden z nich.

9:03Jeśli go sobie.

9:04Jeśli na niego klikniemy, to za chwilkę nam się odtworzy.

9:07Możemy sobie powiększyć.

9:12I widzimy kursor, który wykonuje jakieś akcje.

9:15To wszystko jest animowane.

9:17W aplikacji Adobe After Effects z pomocą bardzo prostych funkcjonalności widzimy

9:23jak kursor klika w poszczególne pola, zaczyna wpisywać, zapisuje klika publish,

9:30pokazuje się konfetti i to w zasadzie koniec animacji.

9:34Potem ona zaczyna się od początku.

9:36To jest jedna z takich animacji.

9:37Druga np..

9:41Druga animacja.

9:43Tutaj też z tego folderu może.

9:50Może zobaczmy to.

9:57Tutaj widzimy jak kursor przesuwa kafelki, następnie kafelki.

10:00Tutaj się.

10:03Update'u Wpisujemy tytuł, wpisujemy jakiś podtytuł i widzimy, że to wszystko

10:09jest bardzo płynnie animowane.

10:11Pojawia się tutaj przycisk Save, następnie Publish i ponownie wyskakuje konfetti.

10:19Jest to już bardziej rozbudowana animacja i będzie ona ważyć troszeczkę więcej.

10:22Jeśli wybierzemy tutaj lot i JSON to będziemy mieli ponad 3 MB.

10:28To samo jeśli wybierzemy Optimizer, Load i JSON.

10:30Ale z pomocą przychodzi nam Lotniczy Optimizer.

10:34LOT Mamy tutaj tylko 500 KB.

10:37z czego w tym przypadku najlepiej skorzystać.

10:42Jest to troszeczkę cięższa animacja, ale dalej jest ona bardzo lekka.

10:45500 kilo to też nie jest dużo, natomiast jest to więcej niż np.

10:5020 kilo, a jest więcej.

10:52Z racji tego, że mamy tutaj naprawdę dużo elementów wektorowych, dużo węzłów,

10:56dużo ekranów, dużo kompozycji.

10:59Po prostu jest ona dłuższa.

11:01Tu się więcej.

11:03Więcej dzieje w przypadku prostych, jakiś ikonograficznych animacji.

11:08Te animacje wtedy są lekkie i mogą one ważyć np.

11:115 czy 6 KB.

11:18Jeśli wrócę do Dashboard u, to takie animacje też tutaj mam.

11:29Np. to jest jedna z nich.

11:37I ta animacja jest już naprawdę bardzo lekka.

11:41Waży ona, jeśli pobierzemy sobie zoptymalizowany LOD i waży ona tylko 27

11:46KB, więc jest duża różnica.

11:52Tak czy inaczej lot jest bardzo lekkim formatem.

11:56No cóż, będziemy tworzyć podobne animacje.

12:00A na teraz to wszystko.

12:01Chciałbym, żebyś w przerwie stworzył sobie swoje konto.

12:06Po prostu zarejestrował się, wpisał swój adres email, wymyślił hasło,

12:10abyś stworzył sobie po prostu swoje konto na Los I files.

12:14Files.

12:17Nie musisz kupować żadnej z tych płatnych opcji.

12:21Wystarczy Ci darmowe konto do przerobienia tego szkolenia.

12:26Stworzymy jedną albo dwie animacje, które będą troszkę bardziej rozbudowane, więc

12:32nie ma potrzeby, żebyś kupował którykolwiek z tych planów.

12:36A teraz to wszystko.

12:37Dziękuję Ci serdecznie za uwagę i do usłyszenia.