Reanimated 2.0 już jest! Biblioteka React Native Animated została ponownie zaimplementowana. Reanimated 2.0 zapewnia zupełnie nowe doświadczenia przy pisaniu animacji wykonawczych w aplikacji. Kolejna nowa wersja rozwiązuje wiele ograniczeń znalezionych w poprzedniej wersji. Kompleksowa i niskopoziomowa abstrakcja interfejsu API biblioteki Animated umożliwia jeszcze większą elastyczność, szczególnie jeśli mowa o interakcjach opartych na gestach.

Reanimated 1.0

Ogólnie, biblioteka Reanimated pozwala tworzyć animacje i interakcje zachodzące w wątku interfejsu użytkownika. Celem jest poprawa wydajności oraz interaktywności aplikacji. Ze względu na podejście deklaratywne wcześniejsza wersja Reanimated była w stanie serializować interakcje zgodnie z opisem w JavaScript. Następnie odtwarzała je w natywnym systemie Android lub iOS.

Co nowego?

Przede wszystkim wersja Reanimated 2.0 jest wstecznie kompatybilna z wcześniejszą wersją. Pozwoli to programistom stopniowo przyjmować zmiany. Nowa wersja wprowadza zestaw zupełnie nowych interfejsów API. W związku z tym twórcy postawili sobie za cel zdefiniowanie małych fragmentów kodu JavaScript. Uruchamiałby się podczas reagowania na zdarzenia w wątku interfejsu użytkownika oraz podczas aktualizacji właściwości widoku. Wydanie wersji Reanimated 2.0 pozwoliło także na wydanie odświeżonej dokumentacji z uwzględnieniem wszystkich aspektów nowego API.

API Reanimated oparty na workletach

Pierwszą wprowadzoną zmianą jest wprowadzenie Hooka useAnimatedStyle. Pozwala on na stworzenie powiązania między atrybutami View a kodem, który można wykonać w workletach. W związku z tym, korzystając z useAnimatedStyle przekazuje się worklet jako argument.

Następnie zwrócony obiekt można przekazać Animated.View jako styl:

Z kolei wspólne wartości pozwolą na reaktywność hooka stylu. Podobne do Animated.Value, wspólne wartości mają trzy najważniejsze zadania – przenoszą dane, napędzają animację oraz zapewniają reaktywność. Tą ostatnią osiąga się subskrybując aktualizacje właściwości wartości. Reanimated będzie automatycznie subskrybował aktualizacje, jeśli animowany styl pracy przechwyca wspólną wartość. Styl pracy uruchomi się ponownie po zmianie wartości:

Worklety są tylko kodem JavaScript, dlatego logika aktualizacji jest tak złożona, jak to jest konieczne.

Animacje

Bezsprzecznie najważniejszą częścią w Reanimated 2.0 są animacje. Twórcy projektowali interfejs API tak, aby udostępnienie animacji było na wyciągnięcie ręki.  Wprowadzenie natychmiastowych aktualizacji właściwości stylu do animacji, za pomocą Spring, jest kwestią należenia wartości docelowej w pomocniku Spring.

Za pomocą tej techniki aktualizacje szerokości widoku będą animowane. Ponadto, animacja przerywa się, więc po aktualizacji wartości docelowej, rozpocznie się od pozycji w danym momencie.

Źródła:

• https://blog.swmansion.com/introducing-reanimated-2-752b913af8b3
• https://github.com/software-mansion/react-native-reanimated