Comment créer une animation continue dans React Native à l'aide d'Animated.loop()

L'une des fonctionnalités clés de l'API animée de React Native est la Boucle.animée() méthode à l'aide de laquelle vous pouvez 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 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'Animé. L'objet de valeur a été créé, vous pouvez le transmettre à 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, assouplissement, et retard, qui déterminent le comportement de l'animation.

Boucler 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 le paramètre itérations propriété dans l'objet de configuration d'animation.

L'exemple suivant qui montre comment utiliser Animation.loop() pour créer une animation de rotation en boucle :

importer Réagir, { useState, useEffect } depuis'réagir';
importer { Feuille de style, Vue, Animé, Image } depuis'réagir natif';
exporterdéfautfonctionApplication() {
constante [spinValeur] = useState(nouveau Animé. Valeur(0));
 useEffet(() => {
constante spin = spinValue.interpolate({
 plage d'entrée: [0, 1],
 plage de sortie: ['0deg', '360 degrés'],
 });
 Boucle.animée(
 Timing.animé(
 spinValue,
 {
 évaluer: 1,
 durée: 2000,
 utiliserNativeDriver: vrai,
 }
 )
 ).commencer();
 }, []);
retour (

 style={{ largeur: 200, hauteur: 200, transformer: [{ tourner: spinValeur }] }}
 source={{ uri: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
constante styles = StyleSheet.create({
 récipient: {
 fléchir: 1,
 alignItems: 'centre',
 JustifierContenu: 'centre',
 },
});

Dans cet exemple, nous créons un Animated. Objet de valeur appelé spinValue et mettre sa valeur initiale à 0. On appelle alors le boucle() méthode sur la Timing.animé() objet, 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 durée propriété à l'objet Animated.timing(), qui déterminera la durée d'exécution de l'animation avant la boucle. Nous définissons la propriété duration sur 2000, ce qui signifie 2 secondes avant de redémarrer.

Vous pouvez également définir le nombre de fois que l'animation doit boucler en passant le itérations propriété à la méthode loop().

Par exemple, supposons que vous vouliez que l'animation boucle cinq fois avant de s'arrêter. Dans ce cas, vous pouvez appeler Animated.loop() avec itérations: 5. Si vous voulez que l'animation tourne en boucle indéfiniment, vous pouvez omettre le itérations propriété complètement.

En utilisant Animation.loop(), en définissant sa durée, et appliquer correctement le style CSS à l'objet de vue renvoyé, vous pouvez créer des animations en boucle fluides dans React Native.

Travailler avec des animations complexes

Travailler avec une animation complexe n'est pas aussi simple que de travailler avec une seule animation. Ils nécessitent généralement un peu plus de travail pour s'assurer qu'ils se comportent comme prévu.

Voici deux astuces qui vous aideront à boucler des animations complexes dans React Native :

1. Diviser l'animation en parties plus petites

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 mises en boucle indépendamment. En divisant l'animation en parties plus petites, vous pouvez simplifier le code et le rendre plus facile à manipuler.

2. Utiliser la méthode Animated.sequence()

Le Séquence.animée() permet d'exécuter une séquence d'animations les unes après les autres. Cette méthode peut créer des animations en boucle complexes en enchaînant des animations en boucle unique. Vous pouvez utiliserAnimated.sequence() pour créer une animation qui s'estompe d'abord dans une image, la fait pivoter, puis la fait disparaître, répétant la séquence entière une fois terminée.

Ces conseils fournis avec les conseils généraux pour optimiser vos applications React Native vous aiderait à 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 devez expérimenter différentes techniques pour créer des animations en boucle afin d'obtenir une animation à la fois visuellement attrayante et performante.