React Native: Zaawansowane animacje

0.62.2+

0:00Okej w poprzedniej lekcji zrobiliśmy naszą pierwszą

0:04animację interaktywną i na tym zakończymy te animacje

0:08ponieważ to troszeczkę wykracza poza zakres materiału podstawowego natomiast w wielkim

0:13uproszczeniu to w sumie wygląda podobnie to znaczy zawsze musimy mieć jaieś źródło danych w tym wypadku

0:17mamy tutaj informację o pozycji scrolla w przypadku na przykład animacji w której

0:21używalibyśmy gestu czyli takiego pan gesture mielibyśmy też pozycję

0:25x y palca który tutaj byłby

0:30na ekranie który byłby przesuwany i również coś musielibyśmy z tym zrobić problemy

0:34są dwa pierwsze to że tak jak no tutaj w tym przypadku

0:38prostej animacji scrolla mapujemy sobie po prostu naszą wartość na wartość

0:43naszej animacji a interpolujemy tak żeby to gdzieś satysfakcjonowało

0:47nas i na tym kończymy natomiast jeśli chcielibyśmy zrobić coś więcej na

0:51przykład dodać jakiś warunek czy zrobić żeby ta animacja była troszkę

0:55bardziej skomplikowana no to zaczynają się problemy jak to zrobić w momencie gdy ten interpolate nas trochę

0:59ogranicza a cheilibyśmy używać native drivera czyli nie chcemy tutaj

1:04stworzyć logiki w javascripcie która gdzieś tam była że jeśli na przykład palec

1:08opuścił czyli mamy ten akcję release

1:12puszczamy palec to żeby coś się stało ale jeśli jest naciśnięcie

1:16to żeby to się jeszcze zwiększyło i tak dalej a no i to się da zrobić ale właśnie

1:21jest to dość problematyczne ze względu na wydajność na szczęście

1:25powstała biblioteka react native reanimated która rozwiązuje ten problem ona

1:30działa w ten sposób że tworzy swój tworzy

1:35swój taki język deklaratywny język tworzenia animacji

1:39który jest tworzony znaczy piszemy

1:43go w javascripcie chociaż on troszeczkę inaczej wygląda zaraz go pokażę a następnie jest wysyłany do strony natywnej

1:48i ona go już obsługuje czyli jesteśmy w stanie napisać logikę taką którą w javascripcie

1:52piszemy czyli if coś tam then coś tam i tak dalej jesteśmy w stanie napisać w

1:57tym języku i wysłać do strony natywnej która to zrozumie i zinterpretuje

2:01a zresztą sama biblioteka reanimated przezarzucała

2:05się już przez nasz kurs parę razy między innymi dlatego że nasza biblioteka

2:09do animacji react navigation korzysta z niej w przypadku gestów

2:14cofnięcia i tak dalej i różnych animacji oraz jak widzieliście

2:19gdzieś tam przypadkiem jak importowaliśmy animated object to on został przypadkowo

2:23zaimportowany właśnie z tej biblioteki poniewąż taki object też tam jest i tak naprawdę

2:27moglibyśmy tej biblioteki animated react native nie używać

2:31w ogóle tylko w stu procentach przejść na react reanimated co ja robię w

2:35przypadku większości projektów tak więc na poczatkowym etapie oczywiście to nie będzie

2:40potrzebne ale gdzieś tam w przyszłości może wam się przydać i teraz chciałbym żebyśmy rzucili okiem

2:44tylko nie martwcie się że to może być dla was trochę niejasne żebyśmy

2:48rzucili okiem jak to wygląda jak wygląda ten język tego

2:52reanimated znaczy mamy właśnie ten przykład o którym mówiłem czyli mamy jakiś pan gesture

2:56handler czyli jakby nasłuchujemy gest przesunięcia

3:01palcem po ekranie czy po jakimś komponencie dostajemy jakiś event czyli on gesture

3:05event i on nam zwraca jakieś wartości tak zwraca nam jakiś translation x translation y

3:09i state czyli te pozycje x y palca i state czyli czy palec

3:13jest dalej jakby wciśnięty czy był puszczony i co tu się dzieje tworzymy sobie

3:17blok takiej animacji w której możemy robić właśnie

3:22pisać naszą logikę ale deklaratywnie dlatego trochę dziwnie wygląda natomiast jakbyśmy sobie

3:27to przetłumaczyli na javascripta to byłoby bardzo proste i to by wyglądało tak że trans

3:31x równa się x plus offset jeśli coś tam to coś tam i to by było bardzo

3:35proste natomiast na początku ta deklaratywna formuła

3:39jest trochę enigmatyczna ale szybko można ją rozwieść ja mogę pokrótce powiedzieć

3:43co tu się dzieje to znaczy w tym naszym bloku tak naprawdę

3:47przy zmiennej trans x przypisujemy sumę tych dwóch wartości

3:51zmiennej trans y sumę pozycji y i offsetu

3:55a potem sprawdzamy warunek czyli jeśli state jest równe state end to ustaw

4:00taką wartość x ustaw wartość y i tyle czyli jakby sama ta logika jest

4:04bardzo prosta tylko z racji tego żeby umożliwić

4:08interpretację tego po stronie natywnej to nie możemy tego pisać w js-ie musimy to napisać właśnie w

4:12takim języku który będzie możliwy do wysłania sparsowania i wysłania i

4:17uruchomienia po stronie natywnej i oczywiście

4:21tu jest dokumentacja możecie sobie ją całą przejrzeć tych możliwości tworzenia

4:25tych bloków i funkcji jest całkiem sporo natomiast jeśli nie chcielibyście od

4:29razu się to zagłębiać tak niskopoziomowo to możecie sobie zobaczyć bardzo

4:33fajny profil pana williama candilliona nie wiem czy tak się czyta nazwisko

4:37zdaje się że jest francuzem który prowadzi kanał can be done in react native

4:42i tutaj są pokazane przeróżne animacje od gestów

4:46jakichś przeciągnięć od transitions na widokach poprzez

4:50jakieś 3d animacje i bardzo często właśnie william korzysta

4:54z reanimated i to jest fajne możecie sobie taki filmik dotykaj możecie sobie taki

4:58filmik zobaczyć nawet nie skupiałem się za bardzo jak to działa jak on to zrobił ale popatrzeć

5:02co tak naprawdę da się zrobić zresztą sama nazwa kanału wskazuje jest to super super zajawka

5:07mam wielki fan zaglądania do tych filmików i polecam wam ten kanał

5:11sprawdzić bo naprawdę można się wiele nauczyć jeśli będziecie już

5:15na takim poziomie że okej dochodzicie do animacji właśnie interaktywnych

5:19czy macie takie wymagania już piszecie jakąś aplikację swoją to po przejrzeniu tych filmików myślę

5:23że jesteście w stanie juz zasiąść do tej dokumentacji i zacząć analizować jak

5:28taką waszą animację pierwszą stworzyć czyli to jest oczywiście

5:32coś już bardziej zaawansowanego natomiast rzucam wam to jako taki tip który

5:36możecie sobie sprawdzać w przyszłości albo jako po prostu taką ciekawostkę drugą rzeczą którą

5:40chciałbym wam pokazać w przypadku animacji to jest coś to pewnie jest większości osób

5:45znane to jest biblioteka lottie która

5:49również jest portowana na react native i to jest super bo bardzo często mamy

5:53animacje które są no

5:57właśnie na przykład takie i które okej moglibyśmy pewnie w jakiś sposób zaimplementować

6:02czy to deklaratywnie przy pomocy reanimated czy po prostu przy pomocy

6:06biblioteki animated i jakichś tam elementów z kórych by to się składało tylko

6:10po co lottie jest takim narzędziem jest

6:15wtyczką do adobe after effects który generuje

6:19nam taką animacje którą sobie po prostu wklejamy w formie pliku jsona do

6:23naszej aplikacji i możemy sobie taką animację wkleić to jest super

6:27bo animacje wyglądają naprawdę fajnie a nie ma konieczności

6:31zastanawiania się i bezsensownego tworzenia tego z poziomu

6:35właśnie javascriptu i z poziomu takiej logiki tylko po prostu importujemy to sobie z

6:40after effecta designer z którym będziemy współpracować na pewno jest tego narzędzia

6:44korzysta i bez problemu będzie w stanie to zaimportować i możemy osiągnąć naprawdę fajne

6:48rezultaty z ciekawostek mogę powiedzieć że twórcą tej

6:52biblioteki jest airbnb który też tam już na starcie ma parę takich fajnych animacji a

6:57generalnie jeśli chodzi o cały dział animacji to tyle przeszliśmy

7:01od prostych animacji które są po prostu wywoływane

7:05na jakiś tam efekt po animacje zaloopowane które w tej chwili wyłączyłem bo mój

7:10komputer odleciałby w kosmos po animacje kończąc na

7:14animacjach interaktywnych i zarzuciłem wam parę tematów które możecie sobie sprawdzić w przyszłości naprawdę

7:18jeśli chodzi o same animacje to jest to studnia bez dna to znaczy

7:22można w tym siedzieć robić naprawdę fajne rzeczy naprawdę skomplikowane

7:26mam nadzieję że zachęciłem was do tego żeby porobić coś

7:30fajnego i ożywić trochę to co się dzieje bo pamiętajmy o tym

7:34że animacje to nie tylko fajny efekt który gdzieś tam się pojawia i nie wiem

7:39spełnia jakieś wymagania jakiegoś designera tylko jednak to jest podpowiedź dla

7:43użytkownika trochę co się dzieje to znaczy widząc na przykład że klikam tutaj przycisk

7:47upgrade i tutaj może nie tak ładnie zrobiony ale jednak a ten

7:51to nasze kółeczko z levelem się powiększa sugeruje co się dzieje gdyby tego nie było to tak naprawdę

7:55uzytkownik nie wiedziałby co konca co się gdzie zmieniło więc animacje są też bardzo

7:59ważne żeby informować i pokazywać użytkownikowi tak naprawdę

8:03co się w aplikacji dzieje i to tyle w tej lekcji dzięki bardzo