React Native: Animatable

0.62.2+

0:00W poprzedniej lekcji zrobiliśmy sobie po pierwsze animacje dwie

0:04które są tak naprawdę zależne od tej samej wartości tak czyli wykorzystajmy upgrade button animation

0:08do tego żeby i interpolacji do tego żeby zostało to przełożone na

0:12dwie różne animacje i do tego zrobiliśmy taki mały trik żeby

0:17animować background naszego kontenera ale jednak

0:21używać do tego native drivera czyli tak naprawdę animować opacity jakiegoś elementu który jest

0:25za nim a i spoko i moglibyśmy to tak zostawić natomiast

0:29z doświadczenia mogę wam powiedzieć że taki imperatywny

0:34kod który wywołuje jakąś animację jest okej w przypadku jakichś user actions czyli

0:38tak jak klikamy sobie nasz przycisk no to jest okej że nam

0:43się animuje ten przycisk że nam się animuje tutaj nasze kółeczko

0:47z naszym levelem w momencie kliknięcia i to jest jakby naturalne

0:51że wywołujemy a to akurat nie ta animacja natomiast

0:56w przypadku animacji zapętlonych no teoretycznie jest okej

1:00moglibyśmy zrobić mały refactor w tym ta animacja gdzieś wyeksportować żeby tak nie

1:05rzucało się aż tak bardzo natomiast są lepsze rozwiązania i

1:09fajnym rozwiązaniem jest biblioteka react native animatable która służy

1:13właśnie do robienia takich jest idealna do tworzenia animacji zapętlonych deklaratywnie

1:18to znaczy zobaczcie że zamiast tworzyć ten obiekt animated który

1:22którego musimy wystartować w momencie montowania i

1:26jeszcze ewentualnie robić jakąś interpolację jeśli chcielibyśmy żeby to było powiedzmy

1:30bardziej czytelne to możemy sobie skorzystać z czegoś takiego co

1:35wygląda dużo fajniej więc zainstalujmy to

1:39sobie i zaraz zobaczymy jak to działa okej

1:45mamy to i teraz musimy sobie zaimportować wszystko

1:54z tej biblioteki as animatable

1:58from react native animatable

2:04okej i w

2:09sumie sobie na razie sobie stąd tą animację właściwie możemy sobie zakomentować to

2:13wszystko zobaczmy czy nasza animacja zniknęła przebudujmy

2:19okej tak czyli widać

2:25że to tło jest ale już nic nie animuje i teraz możemy właśnie użyć całej

2:29tej fajności deklaratywnego tworzenia takich animacji

2:33ale które mówię to się mega sprawdza właśnie w przypadku takich zaloopowanych animacji

2:37typu właśnie button który gdzieś tam migocze no i jak to działa chcielibyśmy

2:41animować najpierw nasz button upgrade więc go znajdźmy to jest nasz button upgrade i

2:46to co możemy zrobić to opakować nasz button upgrade w animatable

2:51kropka view i

2:57musimy podać parę rzeczy musimy podać tak jak mamy tutaj ładnie

3:01w tej dokumentcji pokazana animation ilość iteracji i ewentualnie jakieś tam

3:05dodatkowe parametry zacznimy od animation i ja

3:09sobie wybiorę taką animację pulse a jeśli chodzi o liczbę

3:13iteracji to mamy możliwość podajmy najpierw 3 zobaczmy

3:17jak to będzie wyglądało tak widać

3:21że po trzech razach ta animacja się skończyła ona nie była jakoś za bardzo widoczna więc tak przede wszystkim zmienimy

3:25to sobie na infinite czyli to sprawi że animacja będzie działał będzie

3:30sie działa w kółko przebudujmy sobie

3:34nasz projekt okej no

3:40i fajnie tych animacji jest całkiem całkiem sporo i mamy

3:44tutaj pełną dokumentację na stronie tutaj mamy przykłady tych animacji

3:49możemy sobie wykorzystać jaką chcemy no i na przykład może użyjmy sobie taka animację jello

3:53tak więc rzucamy sobie jello

3:59i mamy taką annimację dobra to teraz chcielibyśmy podobną

4:04rzecz zrobić z naszym backgroundem natomiast nie możemy naszego backgrounda opakować w view

4:08tak na szybko bo w animatable view dlatego że nasz background jest ma

4:13pozycję absolutną w związku z tym po prostu zamienimy go na

4:17animatable i jemu dodamy parę parametrów oczywiście

4:22musimy zaimportować tutaj wszystko okej

4:31animatable view super jest okej

4:35usuńmy sobie tą animację znaczy te stylowanie

4:40i dodajmy animację dodajmy animation

4:44no i coś sobie wybierzmy fajnego

4:48bounce

4:55out na przykład iteration count

5:01niech to dalej będzie infinite okej zobaczymy jak

5:05to działa fajnie no tylko chyba nie do końca o to nam chodziło poszukajmy

5:11czy jest jakaś inna animacja która by mogła my szukamy

5:15animacji którą można określić jako go fade in out tak czyli żeby się coś pojawiało i znikało

5:19okej mamy tu jakieś fade out zróbmy sobie fade out no

5:26dobra to widzimy że to się faktycznie robi fade out natomiast nie

5:30robi się później fade in cp z tym możemy zrobić na szczęście

5:34biblioteka pozwala tutaj gdzieś mamy to pisane pozwala

5:39nam właśnie robić nasze własne animacje tak czyli możemy podawać

5:43możemy interpolować czyli kluczem w naszej animacji

5:47będzie punkt w trakcie trwania animacji od 0 do 1 i możemy animować

5:52sobie dowolne wartości czyli zróbmy sobie naszą animację na przykład

5:57aha jeszcze jedna rzecz to już nam nie będzie potrzebne

6:01zróbmy sobie

6:05naszą animacje nazwijmy background

6:09animation to się równa no i tak w zerze opacity

6:15niech będzie 0 w 1

6:19opacity niech będzie 0.3 okej

6:25i taki obiekt możemy przekazać sobie po prostu tutaj okej

6:30fajnie tylko jak widać no dalej

6:34jest to tylko fade in albo afade out ale możemy

6:38zrobić interpolację w połowie zostawić

6:43żeby to opacity w połowie było równe 0.3 a kończyło się na zerze i w tym momencie

6:52mamy dokładnie taką animację jaką byśmy chcieli oczywiście możemy też zmienić jej duration jeśli

6:56uznamy że to było za krótkie na przykład niech to wszystko dzieje się w ciągu sekundy

7:02fajnie

7:07i tak naprawdę moglibyśmy musimy pamiętać o jeszcze jednej rzeczy o której pamiętaliśmy

7:11przy poprzednich animacjach tutaj również domyślnie native

7:17driver może być ustawiony na false i tutaj też możemy ustawić

7:21sobie właściwie musimy tak jak mówiłem ustawiać to na true i pamiętać o tym

7:25ustawiliśmy to tam ostatnio to tu okej

7:31no i widzimy że pewnej animacji pewna animacja z jakiegoś powodu nie jest

7:35wspierana przez moduł natywny no i co możemy z tym zrobić najprostszym

7:41rozwiązaniem będzie znalezienie alternatywnej animacji która jednak wspiera nam

7:45native driver a spróbujmy czy shake na przykład jest okej okej

7:53jakby to trochę zależy od tego jakie mamy wymagania tutaj mamy tą ten luz

7:57że możemy sobie je lekko zmieniać jeśli były wymagania że musimy dopasować tą animacje

8:01to znowu musielibyśmy trochę pokombinować tak jak robiliśmy to backgroundem ale zawsze dalej

8:06starajmy się używać tego native drivera ta biblioteka jest dużo bardziej zaawansowana zachęcam

8:11was do pobawienia się nią bo naprawdę można tutaj porobić cuda wianki ale

8:15myślę że jeśli chodzi o podstawowe jej wykorzystanie to tyle tak więc dzięki