Tworzenie animacji obrotu w React Native

W tym samouczku pokażę, jak utworzyć przycisk, który po naciśnięciu obraca się o 720 stopni. Do stworzenia animacji rotacji użyjemy systemu animacji React Native Animated .

Tworzenie komponentu

Najpierw tworzymy komponent funkcjonalny, ButtonWithSpinktóry ma TouchableOpacitykomponent z tekstem w środku.

Zauważ, że tekst jest tworzony przy użyciu Animated.Textkomponentu. Dzieje się tak, ponieważ tekst, który ma się obracać, musi być animowany . Jeśli obracasz coś innego, możesz również użyć dowolnego z tych komponentów:

• Animowany.Obraz
• Animated.ScrollView
• Animowany.Widok
• Animowany.Tekst
• Animated.FlatList
• Animated.SectionList

Funkcja animacji uchwytu

Animated.timing()animuje wartość w czasie za pomocą funkcji wygładzania . Domyślnie używa easeInOutkrzywej, która jest idealna do tego, co robimy. Przekazujemy naszą rotateAnimationwartość i wartość konfiguracyjną, gdzie ustawiamy czas trwania na 800ms. Animacja jest uruchamiana przez wywołanie start()i dołączamy funkcję zwrotną, która resetuje animację.

Interpolować

Metoda interpolate()odwzorowuje zakresy wejściowe na zakresy wyjściowe. Podstawowe mapowanie do konwersji zakresu 0–1 na zakres 0–100 to:

value.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 100]
});

Stworzyliśmy również animatedStyleobiekt, który zawiera tablicę transformz wartością rotate interpolateRotating, którą właśnie utworzyliśmy.

Składam wszystko razem

Dodaj animtedStyleobiekt do Animated.Textkomponentu i widthdo TouchableOpacitykomponentu i gotowe!

Tak wygląda produkt końcowy:

A kod:

Mamy to. Mam nadzieję, że okazało się to przydatne. To był mój pierwszy post na Medium, więc wszelkie opinie są bardzo mile widziane!