Webflow: Easing w Animacji

Webflow 2020+

0:00W kolejnej lekcji. Przed nami ostatnia

0:02rzecz do zrozumienia z animacji. Będziemy używali opcji time-ing i ustawiamy sobie

0:06tzw. niż inital state mówiłem czyli o tym, że możemy

0:09podejść do tworzenia takiego rozwijania na dwa sposoby.

0:12Pierwszy sposób. Zamknę tą animacje to jest

0:15stworzenie najpierw stanu wyjściowego i dopiero animowane go do tego stanu

0:20docelowego tak zrobiliśmy ale mówiłem ci, że możemy też zrobić to trochę inaczej

0:25czyli zostawić sobie stan ostateczny, a dopiero później w animacji zadeklarować

0:31jaki jest jego stan początkowy i odtworzyć ją od tego momentu.

0:34To co chciałbym zrobić teraz to dodać

0:36trochę bardziej łagodne przejście i min. sprawić aby ten akapit który mamy też nam

0:43się ładnie z animował. A nie przeskakiwał zero : jeden.

0:47Jeżeli idziemy za konwencją inicjowania rzeczy tak jak one powinny wyglądać na

0:51początku. To powinienem w zasadzie przejść teraz do właściwości do stylów tego

0:55akapitału następnie nadać mu jakąś klasę czyli

0:58np. FAQ paragraf, a następnie ustawić na ten element oppacity zero.

1:03w przeciwieństwie do display none

1:06display block gdzie włączamy to zero : jeden to oppacity i będziemy mogli zmieniać płynnie w

1:11animacji możemy zrobić animację która trwa

1:14np. sekundę i oppacity zmienia się od zero do stu. Wtedy element nam się ładnie pojawi.

1:19Zgodnie z tym co przyjąłem że mamy mieć

1:22zadeklarowany stan początkowy zmieniłem to oppacity.

1:24Dla FAQ paragraf. Jaka będzie konsekwencja tego

1:28taka, że w pozostałych elementach tego FAQ paragraf nie mam tylko zwykłe paragraf

1:33więc po prostu będę musiał zaraz po usuwać sobie te FAQ itemy. Zduplikować ten pierwszy

1:37który stworzy ale z tym nie ma żadnego problemu przecież.

1:40Więc na razie zostawię ten jeden kolejny przechodzę do FAQ item.

1:44Wybieram "H" panel animacji i przechodzę do

1:46animacji FAQ question open którą mamy na samym początku.

1:50Chciałbym ci pokazać jak możesz też zainicjować rzeczy z poziomu animacji, a

1:54nie z poziomu tego stanu wyjściowego który to robiliśmy.

1:57Więc jest to można powiedzieć jakaś

1:58alternatywa, a będziemy z jej pomocą chcieli zrobić tak żeby FAQ item miało jakiś

2:04zadeklarowany rozmiar na początku, a dopiero później zmienimy ten rozmiar.

2:08I dzięki temu uzyskamy animację wysokości tego elementu gdzie powinniśmy to zrobić.

2:13Zrobimy to na samym początku czyli tutaj i wybierzemy dlatego FAQ item.

2:17Zmianę rozmiaru czyli

2:20size rozmiar mamy tutaj: weight , high.

2:23Zadeklarujemy high na sto dziesięć pikseli teraz sto dziesięć pikseli to jest dokładnie ten

2:28zwinięta wysokość naszego pytania.

2:31Natomiast to jeszcze nie wystarczy bo my

2:34musimy tę część animacji którą zrobiliśmy oznaczyć teraz jako stan początkowy tej

2:38animacji. Czyli przestawić ten trigger set as initial state niższą stawkę więc kliknij set.

2:44Teraz zmieniła się ikonka.

2:45To znaczy, że inicjujemy te animacje z takimi ustawieniami, a

2:50dopiero później rozpoczyna się ona od tej sekundy zerowej.

2:53Więc można powiedzieć, że to jest alternatywne do tego co zrobiliśmy żeby

2:56ustawiać to od razu tak w HTML-u, że jest stan początkowy.

2:59Możemy zamiast tego zrobić tutaj po prostu

3:01initial state poprzestawiać wszystkie rzeczy, a dopiero później animować.

3:05No dobrze to oddajmy kolejną animację możemy to

3:08np. zrobić tutaj po pokazaniu FAQ item. High/show możemy zrobić znów size

3:13czyli animować wysokości teraz jako high przyjmiemy. No właśnie teraz jaką wartość

3:18tutaj przyjąć bo moglibyśmy to powiększać ale nie wiemy jaką wysokość ostatecznie

3:24chcemy więc zamiast pikseli zmieniamy wartość tych właściwości na auto.

3:28Dzięki temu wysokość automatycznie

3:31dostosuje się do zawartości i czy będziemy mieli dłuższy czy krótszy paragraf.

3:35W odpowiedzi będzie to działać dobrze.

3:39Zobacz że teraz nasza animacja wygląda naprawdę fajnie najpierw się to rozwija

3:43później się zmieniają kolory, odkręca się też strzałka.

3:46Może ten size możemy zmienić w duration na

3:49np. trzy dziesiąte sekundy.

3:51I pytanie czy nie robić czegoś w trakcie.

3:54Wydaje mi się, że przykładowo że ta ikona mogłaby się rotować razem z rozwijaniem.

3:59W sumie chyba te elementy mogłyby się zacząć animować

4:03równocześnie. Zobaczmy jak to teraz wygląda.

4:07Myślę że spokojnie mogłyby się zacząć animowane równocześnie te wszystkie rzeczy

4:11czyli teraz w sumie całość dzieje się dość szybko w trzy dziesiąte sekundy.

4:15Jeżeli chcielibyśmy to opóźnić też możemy to zrobić albo przykładowo w size

4:19możemy zamiast trzy dziesiąte sekundy na cztery dziesiąte sekundy.

4:22Będzie to trwało trochę dłużej.

4:23Natomiast w tym miejscu dodamy sobie zmianę oppacity.

4:28Natomiast zły element wybrałem zrobiłem to celowo bo często tak rzeczywiście jest, że

4:32najpierw wybierzemy akcję, a mamy zaznaczone zły element nawigatorze.

4:36Można to łatwo zmienić klikając prawym

4:38przyciskiem myszy i wybierając polecenie change target nie musimy usuwać wystarczy

4:42wybierzmy change target bo my chcemy zmienić oppacity dla FAQ paragraf. Chcemy go po

4:47prostu pokazać czyli o ile wcześniej mieliśmy deklarowane na zero

4:51procent. Teraz możemy zrobić to na sto procent. Czas trwania takiej animacji

4:56powinien wynieść jakieś trzy dziesiąte sekundy dodatkowe.

5:00I teraz całość animacji wygląda tak, że nam

5:01się to najpierw rozwija, a później pojawia się ten element.

5:05Wszystko wygląda całkiem fajnie.

5:07Jedyna rzecz która

5:08mnie trochę boli to jest to, że wygląda to bardzo liniowo i pokażę ci na

5:13przykładzie tego rozwijania gdybyśmy zmienili je

5:16np. do trzech sekund będziesz mógł to lepiej zaobserwować.

5:19Teraz po wybraniu play to się nam się animuje. Animuje tak powoli ale liniowo

5:23czyli wartości w czasie zmieniają się o równe jednostki.

5:26My chcemy zmienić tę animację w środku w

5:29taki sposób żeby ta animacja powiększania się zachodziła trochę szybciej na początku

5:34i zwalniał a na końcu czyli żeby miała jakąś dynamikę.

5:37W przyrodzie jest tak, że elementy zwykle

5:39ma jakąś masę i w momencie gdy taki obiekt

5:42np. przyspiesza i zatrzymuje się. To nie jest

5:45to nigdy liniowe nie zachodzi to nigdy w taki sposób. Właśnie jak mamy tutaj.

5:49możemy to zmienić albo z pomocą presetu albo wybrać w ogóle jakiś customowy easing.

5:53Ale zerknijmy na razie na presety. Te

5:55presety są od różnych bardzo zwariowanych

5:58np. boune, gdzie będzie nam się to odbijać.

6:00Jeśli teraz wybiorę play zobaczysz, że dojedzie do dołu i odbija się na dole.

6:05Mamy też jakieś różne

6:07np. in out quad coś takiego co w pewien sposób na końcu zmieni tą

6:12animację. Zobaczymy na początku było wolniej później na końcu przyspieszyła.

6:16Ja wybieram zwykle z tych presetów jedną z opcji ease.

6:20Jeżeli wybierzemy ease in i to będzie ta animacja

6:22wolniej zachodziła na początku i później przyspieszy jeżeli wybierzemy ease auto to

6:26będzie szybciej na początku i później zwolni, a jeśli wybierzemy ease in out to

6:31wolniej na początku. Wolniej na końcu czyli ona będzie

6:35najpierw wolniej przyspieszy i później zwolni.

6:37To jest taki fajny efekt ease in out który możesz zaobserwować teraz. Na początku jest

6:41wolniej przyspiesza i zwalnia na końcu to jest dużo bardziej naturalne oczywiście

6:45nie w trzy sekundy, a w te cztery dziesiąte sekundy myślę, że też będzie to fajnie wyglądało.

6:51Więc nie jest już to takie liniowe.

6:53Jest dużo dużo lepiej, a gdybyś chciał

6:55stworzyć swój własny zupełnie customowy easing. To masz tu do dyspozycji specjalny

7:00easing edytor gdzie możesz zacząć od jakiejś predefiniowanej krzywej.

7:04Tutaj masz progres, a tutaj masz czas czyli

7:06to jak animacja zachodzi w czasie gdy jest liniowa to łatwo to obrazuje

7:11właśnie ten wykres, że wszystkie jednostki zmieniają się w jednostce czasu

7:15np. jakbyśmy mieli jedną sekundę, dwie sekundy,

7:17trzy sekundy to tu jest dziesięć, pikseli dwadzieścia, trzydzieści pikseli.

7:19One zmieniają się równo i teraz ty możesz zburzyć hierarchię.

7:23Jeżeli zrobiłbyś to

7:24np. w ten sposób no to na początku będziesz szybciej bo w jednostce czasu jedna

7:30sekunda będziemy mieli już trzydzieści procent , trzydzieści pikseli przesunięte, a

7:34np. tutaj możemy zrobić to wolniej ale de facto możesz to tutaj wszystko zrobić

7:37podejrzeć z pomocą play i zobaczyć jak to wygląda.

7:40My nie będziemy tego robić zostawimy ten preset.

7:43Wydaje mi się, że w większości przypadków po prostu korzystam z różnych presetów.

7:47Jest tutaj na tyle dużo, że jest z czego wybierać.

7:49No dobrze to mamy to gotowe można powiedzieć jeśli chodzi o easing i

7:55time-ing tej animacji z powrotem to nie będziemy musieli nic zmieniać ale musimy

7:59na pewno jeszcze ustawić na początku tej animacji, że chcemy najpierw ukryć ten FAQ

8:06zaznacze go i tutaj wrzucę oppacity. Wrzucimy oppacity z powrotem do zera.

8:13Później mamy ten nasz rozmiar FAQ item też trzeba było zmienić.

8:17Czyli dorzuce to jako przenieśliśmy się na FAQ item.

8:22Dorzucimy to tutaj potrzebujemy po prostu zmienić rozmiar.

8:25Znowu do tych stu dziesięciu pikseli

8:28wysokości high czyli przywracamy ten stan jakby początkowy.

8:31I tutaj zależy nam na tym żeby to akurat

8:33miało miejsce razem z tymi wszystkimi pozostałymi innymi animacji.

8:38Więc najpierw nam to zniknie tyle, że nie

8:40przez pół sekundy tylko może dwie dziesiąte sekundy a później będziemy przez

8:45trzy dziesiąte sekundy tym razem z zwijali i przez dwie dziesiąte sekundy.

8:49Cała animacja trwa pół sekundy.

8:51Myślę że jest ok.

8:52No to zobaczmy jak to wygląda ale może

8:55zanim to podejrzymy to ja sobie FAQ item, zduplikuje.

8:58Czyli Command "C" and Command "V", Command "V" i wrzucimy do drugiej kolumny z trzy i teraz możemy to podejrzeć.

9:03Mamy sporo pytań, zobaczmy.

9:05Fajnie to działa ładnie się też chowa i na każdym elemencie będzie działać tak samo.

9:10Możemy jednocześnie rozwinąć parę i uzyskać właśnie takie efekty.

9:15Super to wszystko nasza animacja jest gotowa omówiliśmy w zasadzie wszystkie

9:19niezbędne elementy, warianty które znajdują się w customowych animacjach webflow.

9:24Dzięki za uwagę. Do usłyszenia w kolejnej lekcji.