Création d'une animation de rotation dans React Native

Dans ce didacticiel, je vais vous montrer comment créer un bouton qui pivote de 720 degrés lorsqu'il est enfoncé. Nous utiliserons le système d'animation React Native Animated pour créer l'animation de rotation.

Création du composant

Tout d'abord, nous créons le composant fonctionnel ButtonWithSpinqui a un TouchableOpacitycomposant avec du texte à l'intérieur.

Notez que le texte est créé à l'aide du Animated.Textcomposant. C'est parce que le texte qui va pivoter doit être animable . Si vous faites tourner autre chose, vous pouvez également utiliser l'un de ces composants :

• Image.animée
• Animated.ScrollViewAnimated.ScrollView
• Vue.animée
• Texte.animé
• Animated.FlatList
• Animated.SectionList

La fonction handleAnimation

Animated.timing()anime une valeur dans le temps à l'aide de fonctions d'accélération . Par défaut, il utilise la easeInOutcourbe qui convient parfaitement à ce que nous faisons. Nous transmettons notre rotateAnimationvaleur et une valeur de configuration, où nous définissons la durée à 800 ms. L'animation est démarrée en appelant start(), et nous incluons une fonction de rappel qui réinitialise l'animation.

Interpoler

La interpolate()méthode mappe les plages d'entrée aux plages de sortie. Un mappage de base pour convertir une plage de 0 à 1 en une plage de 0 à 100 serait :

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

Nous avons également créé l' animatedStyleobjet, qui comprend un tableau transformavec la valeur de rotation interpolateRotatingque nous venons de créer.

Tout mettre ensemble

Ajoutez l' animtedStyleobjet au Animated.Textcomposant et un widthau TouchableOpacitycomposant et nous avons terminé !

Voici à quoi ressemble le produit final :

Et le code :

Et là, nous l'avons. J'espère que vous avez trouvé cela utile. C'était mon premier message sur Medium, donc tout commentaire est grandement apprécié !