React Native: Animated.interpolate

0.62.2+

0:00No dobra w ostatniej lekcji zrobiliśmy żeby nasz button się tak fajnie amimował

0:04w kółko zapętlony i to jest okej i pokażę wam jedną

0:08rzecz która czasem potrafi sprawdzić tworzenie naszych

0:12animacji to znaczy robimy sobie naszą animację tak i od

0:16początku kiedy robimy nasz obiekt animacji no musimy wiedzieć jakie wartości chcemy

0:21żeby miała na początku jakie chcemy żeby miała na końcu i to jest okej natomiast możemy

0:26to trochę uniezależnić od samej animacji co mam na myśli to znaczy zróbmy

0:31sobie tutaj obiekt nazwijmy

0:35go upgrade button scale tutaj

0:41użyjmy naszego animation current i możemy wykorzystać

0:45taką właściwość obiektów animacyjnych jak interpolate właściwie możemy

0:51funkcję a co my tu mamy możemy podać nasz input range

0:55czyl i w naszym wypadku załóżmy że to będzie od 0 do 1 tu

0:59możemy podać jakie wartości chcemy żeby były na jakie wartości mamy

1:03mapować te dane wejściowe czyli jeśli nasza animacja będzie miała tutaj 0 to

1:07my na przykład chcemy żeby nasz scale miał na przykład 1.0

1:11a dla wartości 1 żeby miał 1.2 to

1:15może brzmi trochę enigmatycznie ale zaraz to zrobimy zróbmy

1:20zatem żeby nasza animacja zaczynała z punktu 0.0 przychodziła do punktu 1.0 i wracała

1:25do punktu 0.0 a

1:29to wykorzystajmy w naszej w naszym buttonie okej

1:35zobaczmy co się dzieje wiele się nie zminiło natomiast

1:39w tej chwili uniezależniliśmy się trochę od tej animacji którą

1:43robimy i tylko mapujemy sobie jej wartości na to co chcielibyśmy

1:47uzyskać i jest to dużo wygodniejsze bo tu od razu widać

1:52animacja zawsze może przebiegać od 0 do 1 a to w jaki sposób

1:56my będziemy sobie to mapować to już robimy tutaj co jest fajne w tym to że to nas

2:00nie ogranicza z dwóch wartości początkowych i końcowych ale również do wartości pośrednich czyli

2:04jeśli zrobimy sobie na przykład tutaj punkt zero pół to

2:10możemy sobie zrobić żeby ta nasza animacja też w jakiś sposób przez

2:15ten punkt mapowała tą wartość pół na naszą skalę czyli

2:19na przykład zróbmy coś dziwnego żeby to wyglądało w ten sposób co się teraz będzie działo

2:23na dzieja się jakieś dziwne rzeczy ale możemy tak to zostawić

2:27tak to znaczy możemy sobie jeszcze pójść kawałek dalej możemy tak naprawdę dodać tutaj 0.7

2:32i tu kolejną dodać kolejną wartość na przykład półtora

2:37jak widać nasza animacja będzie przebiegać zgodnie z tymi punktami to

2:42w konkretnym przypadku takiego takiej jednej animacji może nie daje

2:46wiele plusów ale załóżmy że chciałbym sobie

2:50animować jeszcze jakąś inną rzecz razem

2:54z tym buttonem i niech to będzie na przykład tło

2:59tutaj tło tego kontenera naszego ekranu więc zrobimy sobie to

3:04samo czyli tylko nazwiemy to sobie na przykład container

3:10background-color

3:15a załóżmy żeby że

3:19mamy dane od 0 do 1 i to

3:25co chciałbym uzyskać to jest kolor wejściowy

3:29na przykład taki i

3:34kolor wejściowy na przykład taki

3:38biały powiedzmy tutaj moze zmniejszmy to na 0.3

3:42tak fajne jest to że interpolate

3:46nie musi przyjmować tylko wartości nie musi przyjmować tylko liczb

3:50tak może przyjmować na przykład właśnie kolor i on będzie wtedy między tymi

3:54kolorami fajnie płynnie przechodzić a spróbujmy to wykorzystać czyli

3:59zróbmy sobie style background-color to

4:04się równa nasz container background tu się coś wskoczyło okej

4:09zobaczmy nic się w tej chwili nie dzieje

4:13no to zapewne dlatego że nasz obiekt container nie jest po animated

4:18okej no

4:23właśnie więc fajnie że interpolate może przyjmować inne wartości ale

4:27nie fajnie bo nasz native driver tego nie wspiera natomiast na poczet

4:32tutaj testów wyłączmy sobie w naszej animacji obsługę native drivera

4:37zobaczmy jak to wygląda super

4:42tak super no jakby super to kwestia względna natomiast mniej więcej o to nam chodziło

4:46żeby ta animacja działała równo

4:50z tą animacją i sobie poprawimy ten nasz button żeby on przyjmował te

4:54wartości jednak trochę bardziej ludzkie

4:58powiedzmy teraz widzimy że ta animacja mniej więcej chodzi w

5:03parze razem z animacją naszego buttona i to jest fajne jakby teoretycznie moglibyśmy

5:07na tym zakończyć bo jest okej natomiast w poprzednich lekcjach uczulałem was

5:11bardzo żeby zawsze gdzie się tylko da korzystać z tego native drivera a jak się nie da

5:15to żeby kombinować no właśnie no i teraz co my możemy tutaj wykombinować no nie

5:19zmienimy mechaniki działania tej animacji to znaczy

5:23jeśli chcemy animować background-color no to on nie wspiera native drivera

5:27natomiast możemy zrobić trochę haków wrócimy

5:32sobie tutaj z naszym native driverem

5:37container background color zamieńmy na przykład na container

5:41background opacity które też niech przyjmuje

5:46wartość od 0.7 do na przykład 1.0 i usuńmy

5:50sobie stąd nasz styl czyli wróćmy do tego co było

5:54na początku okej nic się nie dzieje ale stworzymy sobie

5:59nowy komponent ostylowany

6:04który nazwiemy na przykład background który

6:11będzie mieć jakiś tam kolor width 100 procent heigth 100 procent który będzie miał

6:15position absolute czyli będzie przypięty

6:21do pozycji od tej wartości który teraz tu ustawię ustawimy

6:25sobie żeby on był zawsze na full screenie czyli top 0 left

6:300 right 0 bottom

6:34oj zero w związku z tym tego

6:38już nie potrzebuję okej musimy sobie

6:44zaimportować nasz obiekt i

6:51go teraz tutaj dodajemy do naszego widoku czyli mamy kontener

6:55i mniej więcej w tym miejscu dodamy sobie background

6:59zobaczmy jak to wygląda okej

7:04ustawmy mu jakiś color bardziej

7:09rażący na przykład ff okej okej

7:15czyli mamy nasz background teraz zauważcie co się dzieje możemy sobie animować

7:19opacity tego tak czyli możemy zrobić style

7:28opacity container background

7:32opacity zobaczmy tylko czy nasz obiekt jest po animated świetnie okej

7:39prawie załóżmy że to będzie szło od 0.1

7:43do 0.5 zauważcie nasza animacja wygląda

7:47praktycznie tak samo jak tamta znaczy zmienia nam się przechodzimy z białego do czerwonego mniej więcej

7:51i wykorzystujemy native driver tak czyli jakby teoretycznie

7:56to jest trochę inna animacja bo już nie animujemy faktycznie background coloru ale

8:00efekt uzyskaliśmy ten sam i o to chodzi w przypadku animacji które

8:05chcemy w przypadku wszystkich animacji jeśli chcemy animować wartości

8:10które teoretycznie nie da nie da się animować przy pomocy native drivera

8:14to starajmy się to jakoś obejść starajmy się właśnie na przykład tutaj

8:18jest jak z tym backgroundem starajmy się

8:22właśnie nakładać coś animować tego opacity jeśli mamy coś

8:26przesunąć to używajmy transforma bo po prostu na dłuższą metę będziemy

8:30mieli pewną wydajność a i to taki protip który chciałbym żebyście zapamiętali to myślę że to tyle w tej lekcji