React Native: Native driver

0.62.2+

0:00Więc zrobiliśmy tą podstawową animację jest

0:04z nią tylko jeden problem po pierwsze zauważcie że wyskakuje nam tu taki komunikat

0:09że animated use native driver was not specified this is a required

0:13option to wynika z tego trochę

0:17z tego w jaki sposób react native tworzy animacje mamy tutaj dwie

0:21możliwości pierwsza możliwość jest taka że ta animacja jest obsługiwana po naszej

0:25stronie js-owej przez nasz wątek js-owy tak jak się dzieje to tutaj a

0:29druga możliwość jest taka dzieje się to po stronie natywnej i teraz oczywiście

0:34ze względów wydajnościowych zawsze lepiej żeby ta animacja działa się po stronie natywnej i teraz

0:38jeśli chcemy żeby ta animacja została wywoływana po stronie natywnej

0:42czyli została tak naprawdę stworzona w naszym kodzie a następnie wysłana na wersję na

0:47stronę natywna i tam została wykonana to musimy dodać właśnie taki parametr

0:51który nam tutaj został zasugerowany przez warning jak use native driver

0:55czyli spróbujmy sobie to dodać use native driver

0:59na true okej

1:03natomiast wyskakuje nam wtedy błąd dlatego że use native driver

1:08fajnie jest taka opcja natomiast nie działa z wszystkimi parametrami

1:12zresztą to jest trochę tak jak w animacjach webowych wszystkie animacje

1:17powodują rekalkulację naszego drzewa one są oczywiście możliwe

1:21natomiast nie są zbyt optymalne i tak samo jest tutaj animujemy wifth i

1:25height które wpływa na wszystkie inne nasze komponenty i na nowo

1:29musimy to drzewo i to po prostu nie wspierane natywnie i w

1:33związku z tym musimy użyć czegoś innego i tutaj na

1:37pomoc przychodzi nam oczywiście CSS-owy transform zamiast

1:41robić to w ten sposób to zrobimy sobie nasz

1:47tansform i w nim będziemy animować

1:53scale zróbmy na razie tak żeby to nam scale

1:59y okej super no i oczywiście naszą

2:04animację już nie ma wartości 100 tylko 1 niech

2:08się animuje do 1.2 a następnie niech wraca do 1.0 okej

2:13w tej chwili oczywiście nic się nie wydarzy bo tutaj

2:17jest na sztywno wbite na 0 natomiast jeśli sobie tutaj przerzucimy naszą

2:21animację photo anim okej

2:27jasne to

2:31błąd zapomnieliśmy dodać current okej

2:38okej zbudujmy to sobie jeszcze raz przebudujmy naszą apkę

2:42no

2:47tutaj coś się nam na androidzie wykrzyczyło niech się odpala no i wygląda

2:51to już znacznie lepiej i co ciekawe już nie krzyczy nam warning dlatego że korzystamy

2:56native drivera tak samo to wygląda na iOS-ie generalnie jeśli chcemy uzyskać jak

3:01większą płynność to zawsze powinniśmy używać native drivera i generalnie

3:06nasze moje zalecenie jest takie żeby zawsze wszędzie gdzie się da native driver

3:10był jeśli wydaje nam się że no faktycznie nie da się tej animacji nie

3:15da się tego użyć przy pomocy nie da się animować naszego obiektu przy pomocy przy pomocy transform

3:20albo opacity czy elementów które podlegają temu native driverowi

3:24no to próbujmy to jakoś obejść ale generalnie zawsze

3:28zaczynajmy od tego żeby ten native driver był bo to nam po prostu gwarantuje

3:32to że to faktycznie będzie działać płynnie i będziemy uzyskiwać 60 klatek na sekundę bez tego na

3:37różnych urządzeniach może być naprawdę różnie dodajmy

3:43sobie jeszcze jedną animacje żeby po kliknięciu upgrade

3:47coś się działo z tą kuleczką bo w tej chwili żebyśmy animację trochę się pojawia raz na starcie a

3:51chciałbym żeby ta animacja jeszcze tutaj była inna nazwijmy sobie upgrade

3:56animation i ona będzie działała na dokładnie tej samej zasadzie czyli

4:00tu sobie możemy te style skopiować o i nasz level indicator właśnie

4:07dokładnie tylko zamiast to anim damy sobie

4:11upgrade animation i

4:15oczywiście nasz level indicator musimy zrobić typu animated świetnie

4:21i zróbmy tak skopiujemy to sobie

4:25żeby po kliknięciu nasz

4:30upgrade animation skalował się no dokładnie

4:34tak samo jak tutaj i zobaczymy jak to będzie wyglądało przebudujmy to

4:40sobie jeszcze raz okej no

4:45i super jakoś to wygląda oczywiście też użyliśmy tutaj native drivera

4:49i myślę że w tej lekcji to wszystko