React Native: Animated.loop

0.62.2+

0:00W ostatniej lekcji zrobiliśmy sobie parę prostych animacji między nimi animację powiększania

0:04tego obrazka po wejściu na zakładkę profil po kliknięciu na upgrade zwiększa nam

0:08się ta kuleczka ja w międzyczasie zrobiłem taki bardzo prosty refactor

0:12naszego kodu znaczy wrzuciłem wszystkie elementy związane z profilem do folderu profile

0:16i generalnie to jest też moje zlecenie na przyszłość ten

0:20projekt jest bardzo eksperymentalny więc nie robię tego

0:24tutaj wszędzie ale tak domyślnie produkcyjnie każdy taki element jak list-item

0:28modal stack navigator powinien być w folderze dlatego że później do tego folderu możemy właśnie

0:32dorzucić osobne style i tutaj przeniosłem wszystkie nasze style

0:37z profile screenu jak widzicie że tutaj nie ma do osobnego pliku a

0:41w późniejszych etapach również można dodawać testy takich komponentów i to jest fajne bo wtedy mamy

0:45tak naprawdę komponent który się zawiera który zawiera właśnie

0:49style osobno zawiera logikę osobno zawiera strukturę dokumentu a i

0:53jeszcze zawiera jeszcze do tego testy więc tak starajcie się robić ja to jakby

0:57zrobiłem tylko tutaj na poczet tego profile'u ponieważ zaczął nam się rozrastać ale

1:03wiele tutaj rzeczy nie pozmieniałem dodajemy jeszcze taką funkcję pomocniczą scale transform

1:07żeby parę razy nie powtarzać tego samego kodu czyli tworzenia tego

1:11transform tutaj w naszym w naszej strukturze tutaj fajnie raczej żeby te tej

1:16logiki nie było za dużo bo tracimy wtedy czytelność a i ciężej

1:20zobaczyć gdzie co właściwie się znajduje to co teraz

1:24chcielibyśmy zrobić to na przykład animować nasz przycisk upgrade

1:28tak żeby zachęcał do kliknięcia w jakiś sposób to co

1:32zrobimy to dodamy sobie nowy obiekt animacji upgrade button

1:36animation i zrobimy tak żeby on

1:40startował przy montowaniu i żeby

1:45jakoś tam się to kręciło zaraz zobaczymy możemy sobie spokojnie to skopiować bo będzie działało

1:50to dokładnie na tej samej zasadzie jest okej

1:55i zróbmy z naszego buttona element animowany

2:01tak czyli musimy dopisać animated kropka ponieważ animated

2:05ma właśnie predefiniowane pewne komponenty które które

2:10stają się tymi animowanymi można je tak nazwać okej

2:14zobaczymy no właśnie dostajemy tutaj błąd to wynika z tego że

2:18sobie wejdziemy jeszcze raz w nasz profile button upgrade

2:22button przepraszam to dostajemy błąd

2:26że styled components nie może stworzyć tego komponentu z

2:30undefined undefined to wynika z tego że po prostu animated nie wszystkie komponenty

2:34ma predefiniowane więc musimy sobie taki komponent stworzyć samemu

2:39zrobimy to tak i

2:44animated ma taką metodę jak create animated component i tutaj

2:48możemy wsadzić dowolny komponent jaki chcemy czyli to mógł być tak naprawdę nasz komponent

2:52moglibyśmy wsadzić na przykład profile container jeśli chcieliśmy go animować i animated

2:56stworzy nam ten opakuje go w ten w taki kontener pozwoli

3:00nam na animowanie czyli my chcemy sobie stworzyć tutaj animowalny

3:05to trzeby by było opacity i przekażemy go w tym miejscu i teraz

3:09już nasz błąd dokładnie powinien zniknąć no ale teraz musimy jakąś

3:13tą animację dodać czyli co chcieliśmy żeby się działo na

3:19przykład niech ten button się skaluje czyli znowu robimy ponownie

3:23jak jest tutaj z tą różnicą że tu

3:27będzie upgrade button animation okej

3:33zobaczymy zbudujmy sobie to jeszcze raz raz spoko

3:39tylko no to się dzieje raz a chcielibyśmy żeby to się powiedzmy działo

3:44w kółko a jak to możemy zrobić najprostszym rozwiązaniem będzie

3:49wyeksportowanie sobie tego do funkcji tutaj damy sobie function upgrade

3:53start upgrade android

3:58button animation i tą

4:02całość po prostu przeniesiemy okej teraz

4:06w tym miejscu to wywołamy i na

4:10przykład na timeout wywołamy

4:15to ponownie po powiedzmy sekundzie okej

4:22no i zobaczmy działa no jest okej a działa

4:26to spoko natomiast możemy zrobić to też trochę lepiej

4:30to znaczy no tutaj musieliśmy zsumować te czasy plus dodać

4:34sobie coś fajne jest to że przy każdym starcie pierwszy parametr przyjmuje

4:39funkcję która zostaje wywołana w momencie skończenia animacji więc tak naprawdę to moglibyśmy

4:43sobie wywołać tutaj to już nam nie będzie potrzebne i mamy

4:50ten sam efekt tak czyli nasz button się tutaj

4:54animuje fajnie ale można to zrobić jeszcze troszeczkę lepiej

4:58wykorzystując wykorzystując właśnie api animated to znaczy możemy sobie opakować

5:03naszego sequence'a w coś co się nazywa loop to

5:09spowoduje że cała nasza funkcja animacyjna

5:13będzie się wywoływała w kółko sprawdźmy

5:18no

5:23i fajnie tak działa nam to przeładujmy zobaczymy

5:27czy to jest okej okej na androidzie

5:32też spróbujmy to przeładować spoko

5:40wygląda to fajnie i myślę że w tej lekcji to tyle