L’une des principales caractéristiques de l’API Animated de React Native est la possibilité de créer des animations en continu à l’aide de la fonction Animated.loop(). Animated.loop() Cette méthode permet de créer une animation continue qui se répète indéfiniment.
Nous allons explorer comment utiliser la méthode Animated.loop() pour créer une animation continue dans React Native et apprendre à personnaliser et à améliorer ces animations.
Comprendre la méthode Animated.loop()
Pour utiliser la méthode Animated.loop(), vous devez d’abord créer un fichier Animé.Valeur objet. Cette valeur est mise à jour à chaque image de la boucle d’animation et sera utilisée pour animer le composant cible.
Une fois l’objet Animated.Value créé, vous pouvez le passer à la méthode Animated.loop() avec un objet de configuration d’animation qui définit le comportement de l’animation.
Cet objet de configuration peut inclure des propriétés telles que durée, assouplissementet délaiqui déterminent le comportement de l’animation.
Bouclez votre animation
Par défaut, la méthode Animated.loop() crée une boucle infinie de l’animation, ce qui signifie que l’animation continuera à se répéter jusqu’à ce qu’elle soit arrêtée manuellement. Cependant, vous pouvez spécifier une durée pour la boucle d’animation en définissant la propriété itérations de l’objet de configuration de l’animation.
L’exemple suivant montre comment utiliser Animation.loop() pour créer une animation de rotation en boucle :
import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Animated, Image } from 'react-native';
export default function App() {
const [spinValue] = useState(new Animated.Value(0));
useEffect(() => {
const spin = spinValue.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg'],
});
Animated.loop(
Animated.timing(
spinValue,
{
toValue: 1,
duration: 2000,
useNativeDriver: true,
}
)
).start();
}, []);
return (
<View style={styles.container}>
<Animated.Image
style={{ width: 200, height: 200, transform: [{ rotate: spinValue }] }}
source={{ uri: 'https://reactjs.org/logo-og.png' }}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Dans cet exemple, nous créons un objet Animated.Value appelé spinValue et fixons sa valeur initiale à 0. Nous appelons ensuite la fonction loop() sur la méthode Animé.timing() qui prend l’état spinValue comme argument. L’objet Animated.timing() décrit la progression de l’animation dans le temps et, dans ce cas, il fait pivoter une image de 360 degrés.
Pour définir la durée de la boucle, nous avons passé un objet durée à l’objet Animated.timing(), qui déterminera la durée de l’animation avant le redémarrage. Nous fixons la propriété duration à 2000, ce qui signifie 2 secondes avant le redémarrage.
Vous pouvez également définir le nombre de fois que l’animation doit tourner en boucle en passant la propriété itérations à la méthode loop().
Supposons par exemple que vous souhaitiez que l’animation soit bouclée cinq fois avant de s’arrêter. Dans ce cas, vous pouvez appeler Animated.loop() avec la propriété itérations : 5. Si vous voulez que l’animation tourne en boucle indéfiniment, vous pouvez omettre l’élément itérations propriété complètement.
En utilisant Animation.loop(), en définissant sa durée et en appliquant correctement le style CSS à l’objet view renvoyé, vous pouvez créer des animations en boucle fluides dans React Native.
Travailler avec des animations complexes
Travailler avec des animations complexes n’est pas aussi simple que de travailler avec des animations simples. Elles nécessitent généralement un peu plus de travail pour s’assurer qu’elles se comportent comme prévu.
Voici deux astuces qui vous aideront à boucler des animations complexes dans React Native :
1. Diviser l’animation en petites parties
Vous pouvez décomposer des animations complexes en animations plus petites et plus simples qui peuvent être mises en boucle individuellement. Par exemple, une animation complexe impliquant à la fois une rotation et une translation peut être décomposée en deux animations distinctes, qui seront exécutées en boucle de manière indépendante. En divisant l’animation en plusieurs parties, vous pouvez simplifier le code et le rendre plus facile à manipuler.
2. Utiliser la méthode Animated.sequence()
La méthode Animé.séquence() permet d’exécuter une séquence d’animations l’une après l’autre. Cette méthode permet de créer des animations complexes en boucle en enchaînant des animations à boucle unique. Vous pouvez utiliser la méthode Animated.sequence() pour créer une animation qui introduit d’abord une image en fondu, la fait pivoter, puis la fait disparaître en fondu, en répétant la séquence entière une fois l’opération terminée.
Ces conseils, ainsi que les conseils généraux pour optimiser vos applications React Native, vous aideront à créer des animations en boucle performantes.
Expérimentez avec votre animation
Les animations en boucle dans React Native peuvent être un outil puissant pour créer une expérience utilisateur plus engageante et dynamique. Vous devriez expérimenter différentes techniques pour créer des animations en boucle afin d’obtenir des animations à la fois visuellement attrayantes et performantes.
