Utilisation de la méthode Animated.spring() pour les animations dynamiques dans React Native

La bibliothèque d'API animées de React Native peut vous aider à créer des animations dynamiques et fluides avec peu d'effort.

Apprenez à créer des animations avec un effet printanier, puis découvrez comment contrôler leur durée et leur vitesse, et appliquez-les dans des scénarios réels.

Que sont les animations dynamiques?

Les animations dynamiques sont des animations où les mouvements des objets animés ne sont pas préprogrammés. Vous pouvez les démarrer en réponse à une interaction de l'utilisateur ou à des modifications de l'environnement. La technique est la plus populaire dans animation jeux vidéo, applications de médias sociaux ou autres formes de médias interactifs.

Les animations dynamiques peuvent offrir une expérience plus immersive et engageante pour les utilisateurs, car elles permettent des mouvements imprévisibles et réactifs qui peuvent changer en fonction de plusieurs facteurs.

Les animations dans les applications mobiles sont, au fil des années, devenues de plus en plus complexes. L'API animée par défaut de React Native a évolué pour s'adapter à ces complexités. Le

Animated.spring() La méthode fournie par l'API peut animer des objets React Native, créant un effet dynamique.

Contrôler l'animation

Lors de l'utilisation du Animated.spring(), vous devrez contrôler l'animation pour vous assurer qu'elle se comporte comme vous le souhaitez. Animated fournit un ensemble de méthodes pour contrôler et manipuler manuellement vos animations React Native.

Une de ces méthodes est arrêt(), ce qui provoque l'arrêt de l'animation à sa valeur actuelle. Cette méthode est utile lorsque vous devez annuler une animation ou la réinitialiser à son état initial.

Par exemple:

constante stopAnimation = () => {
 position.stop(valeur => {
 position.setValue(0);
 });
};

Notez comment vous pouvez utiliser le définirValeur() méthode pour réinitialiser la valeur de position à son état initial de 0.

Une autre méthode à votre disposition est réinitialiser(), qui ramène l'animation à son état initial. Cette méthode est utile lorsque vous devez redémarrer une animation.

Applications du monde réel

Vous pouvez explorer une utilisation pratique de la Animated.spring() méthode en construisant une animation simple. Une balle ronde tombera sur une surface lorsqu'un utilisateur interagit avec elle, puis rebondira dans les airs par la suite. Vous devriez déjà avoir un projet React Native avec lequel vous pouvez travailler.

Tout d'abord, créez une variable d'état pour suivre la position de la balle :

importer Réagissez, { useState } depuis'réagir';
importer { Animé } depuis'réagir natif';
constante Application = () => {
constante [position, setPosition] = useState(nouveau Animé. Valeur(0));

retour (
transformer: [{ traduireY: emplacement }] }}>
 {/* Composant boule ici */}
 </Animated.View>
 );
};

Utiliser Animé. Valeur pour créer une variable d'état appelée position qui suivra la position verticale de la balle. Enveloppez le Voir composant dans Animé. Voir afin que vous puissiez lui appliquer des animations.

Ensuite, créez la fonction d'animation qui fera tomber et rebondir la balle :

constante startAnimation = () => {
 Ressort.animé (position, {
 évaluer: 300,
 friction: 1,
 tension: 10,
 utiliserNativeDriver: vrai,
 }).commencer(() => {
 Ressort.animé (position, {
 évaluer: 0,
 friction: 1,
 tension: 10,
 utiliserNativeDriver: vrai,
 }).commencer();
 });
};

Utiliser Animated.spring() pour créer une animation qui déplacera la balle de sa position initiale de 0 à une position finale de 300. Spécifier friction et tension valeurs pour contrôler l'effet de rebond de la balle lors du réglage useNativeDriver pour vrai pour améliorer les performances.

Vous pouvez ensuite implémenter le code pour déclencher l'animation lorsqu'un utilisateur interagit avec la balle :

retour (

transformer: [{ traduireY: emplacement }] }}>
 {/* Composant boule ici */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Ce code enveloppe le Animé. Voir composant dans TouchableSans commentaires pour que l'animation se déclenche lorsque l'utilisateur appuie sur la balle. Vous pouvez également déclencher l'animation lors du montage du composant en appelant le startAnimation() fonction à l'intérieur de React utiliserEffet() accrocher.

Avec ce code, vous devriez avoir une animation de chute de balle créée à l'aide de Animated.spring().

Animations dynamiques dans React Native

Vous avez vu comment implémenter une animation de chute de balle à l'aide de Animated.spring(), mais il existe de nombreuses autres façons de l'utiliser pour créer des animations dynamiques.

Par exemple, vous pouvez utiliser Animated.spring() pour créer des animations qui simulent d'autres mouvements basés sur la physique, tels que le balancement ou la rotation d'objets.

En combinant Animated.spring() avec d'autres fonctions d'animation, telles que Animated.timing() ou Animated.sequence(), vous pouvez créer des animations complexes et transparentes qui améliorent l'expérience utilisateur.