Webflow: Timing Animacji

Webflow 2020+

0:00Witaj w kolejnej lekcji.

0:01Znów jesteśmy dokładnie w tym miejscu w którym skończyliśmy poprzednio.

0:05Chciałbym teraz wytłumaczyć ci jak można podejść do timingu animacji, jak zmienić czas animacji.

0:09Jednocześnie dopracować animację którą teraz stworzyliśmy.

0:12Są tutaj dwie rzeczy na które warto zwrócić uwagę.

0:15Po pierwsze mamy czas całej sekwencji tych wszystkich animacji które stworzyliśmy FAQ question open

0:21czyli cała ta animacja rozpoczyna się tym, że pokazujemy ten FAQ item answer później

0:26animujemy ikonkę później animujemy bg kolor. Później animujemy tekst kolor.

0:30Czyli mamy jakąś sekwencję.

0:33Ta sekwencja jest teraz automatycznie zczasowana.

0:35Na takiej zasadzie, że niektóre z tych animacji mają zadany jakiś czas

0:39przykładowo animacja obracania ikonki ma zadany czas pół sekundy.

0:44Jest to ustawione w sekcji timing tutaj

0:46mamy coś takiego jak duration. Mamy pół sekundy.

0:49To odzwierciedlone też na linii czasu

0:52całej animacji czyli jeśli to trwa pół sekundy, a zaczyna się na sekundzie zero to

0:56skończy się w zero pięćdziesiąt. Wtedy zacznie się kolejna animacja czyli

1:00w tej sytuacji mamy każdą animację zachodzącą. Po ukończeniu tej poprzedniej.

1:06Możemy to zmienić bo możemy zadecydować, że

1:10np. background kolor będzie się zmieniał razem z tekst kolorem czyli przykładowo zaznaczyć sobie

1:15taki element. Po prostu przeciągnąć go. Upuścić na ten drugi.

1:19Wtedy zobaczy że te dwie animacje zaczną

1:21się równo o zero, pięćdziesiąt czyli pół sekundy czy one równo potrwają.

1:25Nie muszą wcale trwać równo można dla FAQ item ustawić duration

1:29np. zero : dwa jeśli chodzi o bg kolor, a na tekst kolor można mieć zero, pięć. Będzie się to po

1:35prostu rozpoczynać równo ale skończy się w różnym czasie.

1:38Więc w ten sposób można je grupować żeby zaczynało się dokładnie równocześnie.

1:42Można też zarządzać tym samym parametrem

1:45stąd czyli tutaj mamy start with preview action czyli to będzie się zaczynało

1:49z tą poprzednią akcją razem czyli FAQ item bg kolor będzie się zaczynało razem, a gdy

1:54wybierzemy after to automatycznie znowu rozłączy. My chcemy te dwie rzeczy połączyć.

1:59Teraz przykładowo to FAQ item też mogłoby się zaczynać razem z animacją tej ikonki czyli

2:03też możemy zrobić coś takiego że with preview action.

2:06Ma się to zaczynać.

2:07Możemy to teraz sobie przesunąć do góry tak, że to wszystko można bardzo łatwo zmodyfikować.

2:12Zarządzać tym kiedy się to zaczyna.

2:14Teraz wszystkie te animacje zaczynają się w sekundzie zero to czy połączylibyśmy

2:18jest pokazywanie całej całej odpowiedzi nie ma żadnego znaczenia ponieważ

2:22pokazywanie odpowiedzi tak jak wspomniałem jest zero:jeden. Nie trwa nic tylko po prostu

2:27dzieje się od razu to powstaje pytanie jak będzie wyglądała teraz ta animacja.

2:30Możemy kliknąć żeby ją odtworzyć i pokazać to. Wygląda ona w ten sposób po prostu

2:35wszystko naraz tak jakby mruga. Obraca się strzałka to też dzieje się

2:39trochę szybciej rotacja trwa pół sekundy moglibyśmy ją skrócić do zero

2:44np. dwie dziesiąte sekundy.

2:45FAQ item bg kolor też dwie dziesiąte.

2:48Tutaj mamy tekst kolor też moglibyśmy zrobić dwie dziesiąte czyli mamy taką

2:52bardzo dynamiczną animację gdzie wszystkie elementy praktycznie równocześnie animują.

2:57Kończy się ona w dwóch dziesiątych sekundy.

2:59Poza tym, że możemy rozkładać te animacje. Decydować o sekwencji w jakich mają się

3:05pojawiać animować. Możemy ustawiać dla nich indywidualne

3:08czasy trwania to możemy także zdecydować że przykładowo taki FAQ item.

3:13powinien się animować dopiero sekundę po tym jak animuje się strzałka albo

3:17np. dziesięć sekund albo pięć sekund. Możemy to zrobić

3:20parametrem delay czyli nie musimy tutaj wstawiać kolejnej rzeczy.

3:23Jakoś modyfikować tego czasu nie jest to możliwe.

3:26Zamiast tego możemy ustawić delay na jedną sekundę. W tym momencie czas trwania

3:31całej naszej animacji wzrósł do jednej sekundy dwadzieścia.

3:34A jeśli to zaczniemy odtwarzać to okaże się, że mamy tutaj animację strzałki na

3:39której czekamy sekundę. Dopiero później przechodzimy dalej więc w ten sposób można

3:44też opóźnić pewne animacje względem pozostałych.

3:47My jednak ustawiamy tę wartość na zero

3:48chcę żebyś pamiętał, że tutaj jest czasem się przydaje i jeśli chodzi o timing

3:52animacji to porozmawiajmy jeszcze o easingu.

3:54Ale łatwiej będzie nam to zrozumieć na trochę innym przykładzie.

3:57Więc najpierw zróbmy jakiś progres w całej tej naszej animacji.

4:01Czyli teraz mamy można powiedzieć tylko animację która otwiera nam to pytanie.

4:06Chcielibyśmy analogicznie zrobić animację która je zamyka.

4:09Jeśli przejdziemy teraz do interakcji czyli zatwierdziłem tamtą interakcję.

4:13Jesteśmy teraz znowu w panelu interakcji dla FAQ item.

4:16Mamy tutaj piorunek. Mamy ustawioną na

4:19pierwsze kliknięcie animację FAQ question open teraz na drugie kliknięcie chcemy znowu

4:24ustawić akcję. Znów zacząć customową animację czyli start in animation.

4:28Możemy wybrać z dostępnych animacji mamy tylko jedną.

4:31Nie chcemy tej animacji wybierać nie da

4:33się w webflow zrobić coś takiego że wybiorę ją teraz.

4:36np. odwrócę. Nie ma czegoś takiego.

4:37Zamiast tego możemy dodać sobie kolejną

4:39animację. Powiedzieć że to jest FAQ question close.

4:43Tutaj możemy wszystko odwrócić czyli FAQ item answer wybieramy akcje, a następnie

4:47wybieramy high show. Zmieniamy to znowu na ukryte. Ikońce też dodamy akcję

4:52wybierzemy polecenie rotation. Teraz to co jest istotne nie

4:56przedstawiamy tego na sto osiemdziesiąt stopni w prawo tylko.

5:00Na zero bo pamiętaj że jesteśmy na minus sto osiemdziesiąt. Teraz chcemy dokręcić ją do zera więc

5:05to trzeba wpisać jako zero stopni. Też się nam zaanimuje.

5:09Kolejna rzecz którą chcemy zaanimować to

5:11FAQ item, że wybieramy właściwości bg kolor. Animujemy background kolor do białego.

5:17Kolejna rzecz którą chcemy zrobić to tekst kolor. Animujemy tekst kolor

5:23do naszego midnight blue znów wszystko zrobiliśmy osobno. Zastanawiamy się jak to

5:27połączyć jeżeli chcemy tak samo zrobić jak poprzednio możemy wszystkie te rzeczy

5:31połączyć ze sobą razem zmienić duration na dwie dziesiąte sekundy. Tak samo zrobić

5:36dwie dziesiąte sekundy przy animacji bg koloru oraz tekst koloru.

5:40Można powiedzieć, że w tym momencie mamy odwróconą tą animację.

5:43Gdybyśmy teraz przeszli do podglądu.

5:45Command shift "P" to po pierwszym kliknięciu mamy animację

5:48która zachodzi po drugim kliknięciu mamy jej zupełną odwrotność.

5:52W ten sposób zrobiliśmy co prawda prostą

5:54ale kompletną animację zwijania i rozwijania pytania. Teraz co by się stało gdybyśmy.

5:58chcieli to umieścić na tych pozostałych pytaniach.

6:01No właśnie tym zajmiemy się w kolejnej lekcji.

6:03Do usłyszenia.