React Native: Animacje interaktywne (scroll)

0.62.2+

0:00Na poprzedniej lekcji zrobiliśmy sobie naszą animację zaloopowaną

0:04przy użyciu bibliotek animatable jest to bardzo fajna biblioteka

0:08wyłączyłem sobie zakomentowałem sobie te nasze animacje z tego względu że w

0:13trybie deweloperskim w debug mode

0:17ona dość mocno obciąża komputer i z

0:21tym mój macbook też głośno pracuje w związku z tym pozwoliłem sobie to wyłączyć

0:25a ostatnią rzecz z animacji którą chciałbym poruszyć to są animacje interaktywne znaczy zauważcie że

0:30w tej chwili te animacje były albo triggerowane przez lifecycle naszego

0:35komponentu czyli na przykład na tak jak tutaj mamy po wejściu

0:39ten ekran albo podczas montowania albo przez akcje uzytkownika

0:44kliknięcia natomiast jest jeszcze mnóstwo cała gama animacji która jest wywoływana

0:48w trakcie interakcji w trakcie gestu tak i to

0:53jest troszkę temat bardziej zaawansowany natomiast też chciałbym żebyśmy liznęli tutaj

0:57chociaż podstawową animacje w

1:01właśnie taką interaktywną i żeby to zrobić skorzystamy sobie z naszej listy ponieważ zauważcie

1:05że mamy tu już jakiś gest gest po prostu scrolla i to jest najprostszy gest na

1:09jaki mogliśmy zacząć przejdźmy sobie do naszej listy

1:15to list i teraz

1:19każda lista czyli scroll view flat list zawiera

1:23w sobie taką metodę on scroll która

1:28nam zwraca event i wylogujmy sobie co mamy w tym evencie scroll

1:33event event przepraszam

1:39jedno

1:48za dużo teraz powinno być

1:52okej okej mój błąd

2:00dobra dobra no i zobaczymy co tu się

2:04będzie działo wyczyśćmy sobie logi tak jest i zobaczcie że

2:08dostajemy jakiś event to jest trochę tak jak event który po prostu dosyajemy

2:12z każdego z każdej takiej akcji użytkownika w tym evencie

2:17mamy tak jakby jak native event zobaczmy

2:22co on wyświetla i on

2:27nam zwraca parę wartości odnośnie naszego scrolla ale najważniejszy z nich będzie nas teraz

2:31interesować to jest content offset jak widać on ma w sobie wartość x y

2:35z racji tego że nasz scroll jest wertykalny to nas będzie interesować y czyli wylogujmy

2:40sobie content offset kropka y okej

2:50no i widzimy że w trakcie scrollowania dostajemy pozycję naszego

2:54scrolla możemy sobie włączyć ponieważ przy zbyt

2:58częstym wywołaniu tego możemy gdzieś tam ten nasz logger go

3:02zamulić w związku z tym możemy użyć takiej takiego propsu jak scroll event

3:09throttle i to nam mówi o tym jak często możemy

3:14dostawać te eventy możemy je throttle'owacć tak czyli jakby ograniczyć ich

3:18triggerowanie na przykład możemy to zrobić ograniczyć do dwóch sekund i w tym

3:22momencie jak będziemy animować to zauważcie że nie

3:26częściej niż dwie sekundy będę dostawać ten scroll event żeby

3:31zróbmy sobie tak o widzę że przez jedno

3:36jedno l scroll no nieważne okej spróbujmy jakoś

3:41reagować na tego scrolla zróbmy sobie nasz obiekt animated do animacji

3:45załużmy że tutaj sobie będziemy trzymać zawiemy go

3:51sobie scroll pos anim

3:55żeby było wiadomo niech to będzie właśnie nas use ref new

3:59animated kropka value

4:04niech ma wartość 0 okej tyle to

4:10nam się przyda za chwilę a zróbmy sobie co chcielibyśmy robić z tą animacją czyli fajnie

4:14że coś tam się dzieje scrolluje no załużmy że chcielibyśmy animować nasz przycisk add żeby

4:18w jakiś sposób on reagował na to na tego scrolla zwiększał się zmniejszał coś

4:22takiego więc dodajmy sobie a przepraszam to tu sobie zostawmy dodajmy

4:27sobie zróbmy interpolację czyli nazwijmy to nasz add button

4:32scale i skorzystajmy z naszego scroll pos animation

4:37current kropka interpolate jakie

4:43to przyjmuje wartości początkowe no oczywiście od zera do no tak naprawdę do wielkości scrolla

4:47żeby sobie nie utrudniać życia to wpiszmy tam po prostu 4000 albo

4:51jeszcze 2000 i output range no

4:55chciałbym żeby w momencie jak scroll jest zerowy to żeby to miało wartość na przykład 0.7

4:59scrolla a w momencie jak jest wartość taka bardzo duża to żeby miał 1.2 okej

5:05oczywiście musimy sobie stworzyć

5:10nasz animated touchable

5:14opacity animated kropka

5:19no

5:25okej udało

5:30się nam chyba i dodajmy tutaj style

5:34skorzystajmy sobie

5:39z tego co zrobiliśmy profilu z takiej funkcji pomocniczej żeby nie brzydzić nam kodu

5:43dokładnie z tej funkcji i

5:49wsadźmy tutaj nasz add button scale

5:53dobra zobaczmy co

5:57się dzieje no teraz wiele się

6:01nie dzieje bo nasz obiekt animacji scroll pos animation

6:05nigdzie nie jest uzyty więc to co możemy zrobić tak w najprostszym przypadku to

6:09po prostu w momencie tego scrolla to sobie ustawmy nazwijmy

6:15to scroll pos to się równa możemy

6:20po prostu animować do tej pozycji animated timing

6:25naszą pozycję scroll pos animated

6:29kropka current to value scroll pos

6:35i

6:42duration niech to na przykład niech to trwa 100 milisekund

6:46start no dobra

6:50no i zobaczmy co się dzieje config easing

6:56is undefined co

7:02tutaj zrobiliśmy nie tak okej może

7:07ustawmy sobie na sztywno jakąś wartość

7:14function coś coś coś głupiego zrobiłem

7:18może nie zaimportowałem czegoś aha okej

7:22z racji tego że bardzo częsty błąd z racji

7:27tego że korzystamy z react native animated której powiem wam w następnej lekcji natomiast

7:31tak jak wspominałem w nawigacji nasza nawigacja bazuje na tej bibliotece

7:35i ta biblioteka tak naprawdę jest naprawdę potężną biblioteką

7:39ja pokażę wam tylko tak mniej więcej jak

7:44ona działa i co można z nią robić natomiast ona również zastępuje

7:48w wielu miejscach naszą bibliotekę animated i tak na dobrą sprawę jak już ogarniemy bibliotekę

7:53react native animated to nie musimy w ogóle korzystać z naszego api animated natomiast

7:58animated obiekt tak samo jak w przypadku po prostu naszego react native

8:03animated tak samo się nazywa w tej bibliotece i bardzo często jeśli wpiszemy

8:07sobie animated to mamy tutaj auto generowanie importów zostanie to zimportowane

8:11z tej biblioteki i ta biblioteka no jednak działa trochę inaczej w związku z tym

8:15musimy sobie ten import wrzucić do react native'u a skąd to po prostu

8:19wywalić i w tym momencie powinno być okej tak jest

8:25co się tam działo ustawmy sobie to w ten sposób okej

8:32no działa to tak sobie coś tam się dzieje jest

8:36jako tako może zmniejszmy ten treshold

8:42throttle przepraszam na na przykład 300 no

8:49jakoś to tam w miarę daję radę ale

8:54może zostawmy ustawmy ten threshold minimalny czyli zdaje się że na 16 i

8:59po prostu zamiast animować ten obiekt

9:04to ustawmy mu wartość przepraszam przycisk scroll

9:08pos animation current kropka set

9:15value scroll pos okej tak

9:20naprawdę możemy to wywalić niech to będzie najmniejsze jakie jest możliwe okej

9:25no i zobaczymy co się będzie działo no i fajnie

9:29w sensie mamy naszą animację o to nam chodziło nie jest jakoś najbardziej rozbudowana

9:33animacja na świecie ale mamy natomiast dochodzimy

9:37do animacji i znowu najważniejsze pytanie czy używamy native drivera

9:41no nie wiem tak bo mamy tu jakiś on scroll

9:46event no chyba nie tak skoro nigdzie tego native drivera nie wpisaliśmy

9:50tego nie używamy no bo ciężko żebyśmy w przypadku takiego callbacka

9:54w którym dostajemy informację o evencie w jaki sposób wpisali tu parametr na

9:58szczęście biblioteka animated pomaga ominąć

10:02ten problem to znaczy możemy sobie naszego on scrolla

10:06zamiast tworzyć naszą funkcję strzałkową to

10:10możemy mapować wartości z tej funkcji

10:14na wartości animowalne czyli możemy użyć czegoś tak jak

10:18animated event a to przyjmuje tablicę której

10:23podać jak chcemy co

10:28chcemy mapować na co tutaj się posłużę taką małą pomocą bo

10:32nigdy nie pamiętam struktury tego dokładnie okej czyli musimy najpierw użyć

10:37sobie naszego native eventu w nim mamy zagnieżdżony content

10:41offset w nim nas interesuje y

10:45i chcemy to mapować na nasze scroll pos animation

10:49okej sprawdźmy ale

10:54jeszcze zanim to zrobimy to tutaj wydaje się że w drugim argumencie

11:01tej funkcji możemy poprosić tak

11:05jest możemy użyć parametru use native driver i on będzie nam

11:09mapować te wartości ale już z uwzględnieniem native drivera czyli to tak naprawdę będzie

11:13wysłane na stronę natywną i tam się będą działy cuda zobaczmy okej

11:21to wynika z tego że jeśli chcemy mapować wartości przy uzyciu animated event

11:25to nasza lista również musi być animowalna więc zróbmy sobie animated

11:29kropka flat list wydaje mi się że animated ma taki komponent jak nie to

11:33się go zaraz stworzy i zobaczmy o to ciekawe

11:37zobaczmy

11:44coś tutaj coś namieszałem native

11:50event content offset scroll pos animation

11:55dobrze usuńmy na razie sobie to i

12:02wywalmy

12:07sobie animację naszego buttona na

12:11sekundkę żeby zdebugować w czym jest problem tak

12:16tak nie możemy zrobić ten komentarz a tak

12:22przepraszam okej

12:29undefined is not an object okej

12:33no to jest typowy błąd korzystamy z referencji więc muszę podać current dobra

12:39też nie działa wróćmy sobie tutaj

12:43zobaczymy czy to nam będzie działać okej no i super teraz a tylko wróćmy

12:48skoro już nam to tutaj działa dajmy sobie drugi parametr uzyjmy

12:53native drivera true przebudujmy

12:57to i super nasza animacja

13:01działa przy uzyciu native drivera jest fajnie tylko zauważcie jedną

13:06rzecz ostatnią ja podałem wartości od 0.7 do 1.2 tak

13:11czyli interesuje mnie scroll do 2000 natomiast no scrolluje dalej

13:15i to ewidentnie jest więcej niż 1.2 to wynika z tego że nasza interpolacja jeśli wartość

13:21wejściowa przekracza tą wartość wyjściową to ona będzie interpolować dalej czyli

13:26przy założeniu że przy zerze mamy 0.7 przy 2000 mamy 1.2

13:30no to gdzieś tam przy 4 tysiącach to będzie odpowiednio powiedzmy tam 1.8

13:34czy coś takiego tak czyli będzie ta różnica dalej przeciągana

13:38ale możemy sobie wykorzystać żeby to zmienić i do tego

13:42służą wartości extrapolate czyli uzyjmy sobie

13:47extrapolate right czyli interesuje mnie to co

13:51się będzie działo w te stronę czyli jeśli wartość będzie większa od tej podanej

13:55mamy tutaj parę opcji clamp extend i identity

13:59identity no i sprawdźmy sobie jak to będzie działać z clampem jak

14:04widać clamp powoduje że ta wartość nie zostanie przekroczona tak

14:08czyli jeśli dochodzimy do wartości 2000 to

14:12już więcej niż ten górna granica nie zostanie to przekroczone natomiast zobaczmy jak to wygląda

14:17z lewej strony left jeśli damy extend

14:21co jest domyślną wartością no to będzie się działo to co się dzieje czyli w momencie przekroczenia tej

14:26wartości bo w tym momencie scroll jest na minusie oczywiście w androidzie tego nie zrobimy bo nie

14:30mamy tego bounce backu który by nam pozwalał taką listę wyciągnąć

14:35bardziej więc tutaj to nie będzie zauważalne na iOS-ie widać że ta wartość

14:39jest jeszcze zmniejszana poniżej 0.7 a i to też się bardzo często przydaje

14:43przy różnych różnych animacjach przy różnej interpolacji i w ogóle z mojego

14:48doświadczenia dużo lepiej animować wartości na przykład od 0 do 1 a potem

14:52używać interpolacji i już sobie zamieniać na te wartości które chcemy czyli gdzieś tam sobie tworzymy

14:57animacje gdzieś tam je sobie uruchamiamy czy to właśnie przy pomocy właśnie animated

15:01eventu a później finalnie rzutujemy mapujemy sobie te nasze wartości na to

15:06co chcielibyśmy faktycznie osiągnąć i to jest całkiem spoko i generalnie jeśli chodzi

15:11o animacje interaktywne to tyle w następnym rozdziale pokażę wam biblioteka właśnie react

15:15native reanimated która jest bardzo zaawansowana ale

15:19pokażę wam na różnych przykładach jak moglibyście z niej korzystać i co ona właściwie daje