React Native: Animated

0.62.2+

0:00W ostatnim rozdziale podziałaliśmy całkiem sporo z nawigacją naszej aplikacji wygląda to

0:04fajnie mamy nawigację zagnieżdżoną stackową mamy nawigację animacje tab

0:08barową mamy animację tutaj widok modalny z opcją cofania

0:12z przekazywaniem parametrów naprawdę całkiem spoko teraz chcielibyśmy

0:17dodać trochę animacji żeby ta powiedzmy ożywić ten nasz content i

0:21oczywiście zaczniemy od czegos bardzo prostego i na przykład w

0:25momencie wejścia na zakładkę profile chcielibyśmy żeby ta nasza grafika się powiększyła i

0:29zmniejszyła żeby było widać że coś tam się dzieje w momencie wchodzenia okej

0:33więc przejdźmy do konkretów najważniejsza rzecz w animacji to tak naprawdę zdefiniowanie

0:38tego co jest przyniosę animacji i co chcielibyśmy animować tak czyli

0:43nawet jak animacja jest bardzo skomplikowana to wszystko sprowadza się do rozłożenia

0:47jej na czynniki pierwsze i animowania jakichś konkretnych

0:51wartości w tym przypadku chcemy animować wysokość i szerokość naszego

0:55profile image która w tej chwili jest równa 100 na 100 i chcemy dokładnie ten width

0:59i height zwiększyć a następnie zmniejszyć żeby ta animacja była taka

1:04krokowan więc podstawowym elementem w animacji w react native jest

1:09nasz obiekt animacji nazwiemy to sobie photo

1:15anim i z racji tego że ta animacja

1:19musi nam działać między renderami to użyjemy sobie naszego

1:23hooka use ref znaczy nie naszego ale react native'owego okej

1:32i teraz w tym miejscu musimy stworzyć nowy oboekt animacji

1:36czyli new value przepraszam new animated kropka

1:43value tutaj nie chcemy animated

1:47tego tylko chcemy animated i

1:53musimy podać wartość czyli ona w tej chwili jest 100 a

1:58będziemy chcieli to zwiększyć czyli najprostsze za nami

2:02i co w tej chwili chcemy chcemy zwiększyć

2:07te wartości jeśli chcemy animować jakieś

2:11property jakiś props jakiegoś komponentu

2:15to ten komponent musi być typ animated czyli nasza biblioteka animated

2:19pozwala na tworzenie nam to są akurat predefiniowane takie proste

2:23komponenty tworzenia komponentu który będzie taki jakby animated aware czyli będzie

2:28zdawać sobie sprawę z tego że jest animowany bez tego animacja nam się nie uda no

2:33i okej mamy naszą mamy naszą wartość do animowania mamy

2:37nasz komponent który jest po animated no i teraz zróbmy sobie przekazanie

2:42tych wartości czyli po prostu zróbmy style width równa

2:47się jak sobie to nazwaliśmy photo anim i

2:51tak samo zróbmy z wysokością okej

2:58z tą różnicą że tutaj musimy dopisać sobie current dlatego że w use

3:02która dopiero ma ref referencji która zawiera obiekt current

3:06ktora dopiero ma naszą animację zobaczymy czy to wszystko działa okej

3:13nic się nam nie wysypało tutaj w androidzie sobie to odpalmy też

3:17okej działa

3:23nic się nie dzieje ale działa i teraz przejdźmy do samej animacji samą

3:27animację wywołamy sobie na starcie tutaj

3:31wyżej to niech będzie nasz efekt wywołamy sobie ją o tutaj

3:35przy montowaniu czyli zrobimy

3:39tak no w tym miejscu chciałbym ją wystartować jak to się robi tworzymy sobie wywołujemy sobie

3:44obiekt animated kropka i mamy parę opcji najprostszą

3:49animacją taką z której będziemy korzystać to jest animacja timing po prostu

3:53taka w której musimy podać jakiś zdefiniowany czas trwania animacji ona będzie liniowa podajemy nasz

3:58obiekt który chcemy animować no i mamy parę

4:02własności które musimy podać przede wszystkim to value czyli z jakiej wartości startujemy

4:06to jest wartość stała ale do jakiej chcemy dojść na przykład do wartości

4:10120 i w jakim czasie czyli na przykład powiedzmy

4:15sobie 300 milisekund okej ale taką animację musimy wystartować no

4:22dobra sprawdźmy to okej

4:29okej no to są dwie rzeczy

4:33pierwsza to jest taka że fajnie animacja jest działa powiększyła nam ten element ale

4:38no tego elementu ten element został taki duży więc

4:43coś z tym zrobić oczywiście musimy jakby tą animację w tym momencie teraz cofnąć więc

4:47możemy sobie drugą załóżmy że dodamy do niej delay 310 czyli

4:52żeby ona się wywoła pod 310 milisekundach i

4:56z powrotem chcemy wrócić do wartości 100 no i zobaczymy jak to będzie wyglądało okej

5:05nic się nie dzieje czemu nic się dzieje dlatego że no nie możemy

5:09takiej konstrukcji zrobić tak to znaczy nie możemy zrobić dwóch animacji na tym samym obiekcie i jeden

5:13żeby był z delayem bo po prostu animated nie będzie widziało jak sobie z tym poradzić

5:17więc najprostrzym rozwiązaniem jest po prostu dodać tutaj timeout

5:22na

5:26przykład na te 310 milisekund i przenieśmy to

5:31sobie tutaj i w tym momencie juz powinniśmy mieć pełnoprawną animację

5:36okej wygląda to

5:40fantastycznie no ale wywołuje się tylko raz ale

5:44już wiemy jak sobie z tym poradzić po prostu musimy to zawrzeć w tym miejscu

5:48a nie w use effect ponieważ w tym momencie jak nie podajemy żadnych dependencji

5:53do naszego efektu to zostanie wywołane tylko przy montowaniu więc chcemy to

5:57żeby się działo żeby animacja działa się przy

6:01każdym focus evencie no i zobaczymy czy to

6:05działa w tej chwili okej

6:11jeszcze raz no i super może

6:15nie jest idealnie bo jak widzimy zakrzywienia się nam zmniejszają znaczy

6:20nie jest to dalej okrąd ale

6:24generalnie wygląda to okej