Projektuj Animacje UI z Lottie Files i After Effects: Webflow i animacja po scrollu

0:00Jestem już w Web Flow i z web Flow korzystam zazwyczaj w przeglądarce Google

0:04Chrome, ponieważ na Safari czasami gdzieś tam się to zawiesza.

0:08Jakieś bugi się pojawiają, przynajmniej u mnie.

0:10Dlatego ja wolę tutaj korzystać z Chrome'a.

0:12Mam tutaj prosty projekt landing page i jest to szablon, który

0:17pobrałem ze strony Web Flow z biblioteki.

0:19I tutaj chciałbym wrzucić animacje, czyli dokładnie to nad czym

0:25projektowaliśmy ostatnio.

0:26Chciałbym dopiąć swego rodzaju interakcje, czyli tak, aby nasza animacja postępowała

0:32wraz z krolem, kiedy user króluje stronę.

0:37Więc teraz po prostu musimy przejść do web flow.

0:40Wybieramy Assets i tutaj możemy się przefiltrować na loty.

0:45Nie mamy tutaj w setach żadnego LOD, więc po prostu sobie dodamy.

0:47Wybieram chmurkę, a następnie zaznaczam nasz portal.

0:52Final to LOD i to jest ten plik, który sobie pobrałem stąd z mojego dashboard.

0:59Wystarczy, że wybierzemy Download export i wybieram LOD i albo optymistów LOD,

1:05albo ewentualnie jeśli programista chce możemy podrzucić mu Jacksona.

1:09My dla naszego własnego użytku wybierzemy sobie odloty i tutaj wybieram

1:15ten zloty, który sobie pobrałem.

1:16Wybieram open i jest on już załadowany w porządku.

1:20Teraz dodamy go przeciągając tutaj.

1:30W porządku.

1:34Został on załadowany tutaj, do tego diva.

1:36I teraz jeśli ja wybieram sobie podgląd strony Preview preview,

1:43to tutaj się nic nie dzieje poza tym, że nasza animacja się odtwarza i w momencie

1:47kiedy dojdzie do ostatniej klatki to już nie mamy nic więcej.

1:54Natomiast ja chciałbym tutaj zrobić coś, żeby działo się z tą animacją

1:58w momencie kiedy użytkownik skaluje.

2:00Dlatego musimy tutaj przejść do naszego pliku i możemy ewentualnie

2:05dodać jakiś space ink.

2:07On teraz w tym momencie jest rozciągnięty na całą szerokość przeglądarki, ale możemy

2:10też dodać sobie padding jeśli chcemy zarówno z lewej jak i prawej,

2:15ale ja nie chcę tego robić.

2:16Wolałbym, żeby to było rozciągnięte na całą szerokość.

2:19I teraz, w momencie kiedy mamy zaznaczony nasz lot

2:23i animation, wybieram interaction i mam tutaj do wyboru element Trigger albo Page

2:28Trigger Trigger, czyli wyzwalacz naszej animacji.

2:32Wybierzemy sobie Page Trigger.

2:33Możemy wybrać ikonkę plusa i wybierzemy sobie Will Page i Scroll in.

2:39Czyli w momencie, kiedy strona jest skopiowana.

2:46On scroll rozwijam i wybieram Play Scroll Animation.

2:51Następnie wybieram ikonkę plusa.

2:57I wybieram loty.

3:00I klikam tutaj na pozycji 0.

3:07Nasz lot ustawiony jest na 0 w tym miejscu.

3:10Natomiast gdy osiągnie ona 100% to lot i powinien przewinąć się do

3:15ostatniej klatki, czyli tutaj.

3:19W porządku.

3:22Wybierzmy save.

3:26I jeżeli wybierzemy teraz preview to możemy zobaczyć.

3:34Jak działa nasza animacja?

3:36Problem jest tylko taki, że w momencie kiedy ja już ona odtwarza się

3:42wraz ze schronem, kiedy ja tutaj zaczynam przewijać i wchodzi w ekran nasza

3:48animacja, ona zaczyna się odtwarzać, ale kiedy ja już tutaj się przewinie za bardzo

3:54to nie widzę co się dalej dzieje z tą animacją.

3:57Dlatego ona powinna troszkę tutaj wcześniej się skończyć.

4:01Przejdźmy z powrotem do.

4:05Edycji.

4:07Zaznaczmy nasz lot i przechodzimy do Interaction.

4:10I tutaj przechodzimy do Child Pages Scroll Link.

4:16I myślę, że tutaj gdzieś przy powiedzmy 50%.

4:23Wybierzmy sobie loty nasz lot i powinien osiągnąć 100%.

4:29To możemy sobie usunąć.

4:30I teraz wybierzmy Save, a następnie włączmy Preview.

4:36O. I teraz widzimy znacznie więcej.

4:40Jeszcze za mało.

4:42Jeszcze ta animacja ucieka tutaj, ale już zaczyna to wyglądać bardzo fajnie.

4:49W porządku. W takim razie.

4:54Podnieśmy sobie to i tutaj.

4:59Same.

5:01I teraz znacznie lepiej.

5:10Możemy jeszcze opóźnić start tej animacji, czyli ten moment, kiedy animacja jest

5:17ustawiona na 0%, kiedy mamy pierwszą klatkę.

5:20Możemy sobie dać gdzieś tutaj save i znowu wybierzmy preview.

5:35Może gdzieś tutaj save.

5:38I znowu wybierzmy Preview.

5:42A. I teraz widzimy wszystko bardzo fajnie.

5:49Bardzo fajnie pracuje ten efekt.

5:52Bardzo ładnie pracuje ten scroll.

5:53Warto zwrócić uwagę, że nawet jeśli zwalniamy to też gęstość klatek

5:58jest duża, jeśli zwalniamy scroll. Oczywiście.

6:01Ogólnie rzecz biorąc nasza animacja jest bardzo płynna, działa bardzo fajnie.

6:07I ja jestem jak najbardziej zadowolony z tego efektu.

6:11Jeśli ona jest za duża, bo też może się tak wydawać, to możemy oczywiście dodać

6:14padding, co oczywiście ją też zmniejszy.

6:18Przejdźmy do style.

6:20Ustawmy sobie padding np.

6:22na może powiedzmy 100 pikseli i z prawej strony też 100 pikseli.

6:31Widzimy, że teraz nasza animacja od razu się zmniejszyła, ale chciałbym, żeby ten

6:33kolor był tutaj widoczny po całej szerokości tej przeglądarki.

6:41Więc przejdziemy teraz do background i tutaj zapożyczyłem kolor stąd.

6:52I zobaczmy teraz.

6:59Bardzo fajnie to wygląda.

7:01OK, zrobimy jeszcze jedną rzecz jeśli chodzi o zmniejszenie naszej animacji.

7:04Dodamy tutaj div block, któremu damy wewnętrzny padding większy margines i

7:11mocno ciaśniej tą naszą animację.

7:14Dlatego ja myślę, że możemy sobie np.

7:18wybrać ikonkę plusa Tutaj wybierzmy sobie div block Ten div block damy sobie.

7:28Myślę, że tutaj ok.

7:29I do niego wrzucimy animację w ten sposób.

7:33I teraz ten div block.

7:37Chciałbym żeby miał tutaj padding np.

7:41140 i tutaj też 140.

7:47Szerokość naszej animacji musi być ustawiona na auto.

7:57Tak że bez względu na szerokość przeglądarki.

8:00Animacja zawsze będzie wewnątrz diva, który ma padding 140 pikseli

8:04po prawej i 140 po lewej.

8:06To co jeszcze musimy zrobić to ten div.

8:08Oczywiście powinien mieć background w odpowiednim kolorze.

8:28I teraz zobaczmy.

8:32Bardzo fajnie.

8:36Bardzo fajnie. Włączmy mniejszą rozdzielczość.

8:42Bardzo dobrze to wygląda.

8:48OK.

8:49Dodaliśmy bardzo fajną interakcję do naszej animacji.

8:53Ja tutaj inspirowałem się tym, co możemy znaleźć na stronie Duolingo na przykład.

8:59Mianowicie chodzi mi o tą animację.

9:05Zwróćmy uwagę co się dzieje z postaciami kiedy króluje.

9:08Zatrzymałem teraz scroll i one się też nie ruszają, a jeżeli zacznę przewijać do góry

9:13to animacja odtwarza się od tyłu.

9:17To jest skonstruowane dokładnie tak samo jak nasz lot.

9:24Różnica jest taka, że po prostu mamy tutaj więcej postaci.

9:40Działa to bardzo płynnie i ja jestem jak najbardziej zadowolony z tego efektu.

9:44Warto zwrócić uwagę, że nawet jeżeli zwalniamy scroll, to gęstość klatek

9:52nie maleje.

9:53Tak, to jest cały czas bardzo płynna animacja.

10:01Jeśli zwalniamy, scroll zwalnia również nasza postać.

10:04Jeśli przestaje skalować, postać się zatrzymuje.

10:09Świetnie.

10:10OK, w tej lekcji to już wszystko.

10:12Dziękuję Ci serdecznie za uwagę.

10:14Zapraszam Ci teraz na krótką przerwę i do usłyszenia w lekcji następnej.