Premiers pas avec les animations dans React Native

Les animations peuvent donner vie à une application, la rendant plus attrayante et intuitive pour l'utilisateur. Mais si vous débutez avec les animations React Native, le démarrage peut être un peu intimidant.

Explorez les animations React Native et découvrez comment vous pouvez commencer à créer de belles animations fluides.

Comment fonctionnent les animations natives React de base?

Les animations peuvent créer des transitions fluides entre différents écrans ou éléments. Ils peuvent mettre en évidence des informations ou fournir des commentaires sur les actions de l'utilisateur. Les animations peuvent être simples ou complexes et peuvent utiliser une variété de techniques, telles que des animations graphiques 2D ou 3D.

La portabilité de React Native en vaut la peine si vous ciblez plusieurs plateformes. L'une de ses fonctionnalités les plus puissantes est la possibilité de créer de belles animations pour les applications mobiles.

Vous pouvez animer un objet React Native simplement en modifiant l'état de position du composant souhaité.

Par exemple:

importer Réagir, { useState, useEffect } depuis'réagir';
importer { Afficher, feuille de style } depuis'réagir natif';
constante Application = () => {
// Initialiser l'état pour suivre la position de la boîte
constante [boxPosition, setBoxPosition] = useState(0);
// Utilisez le crochet useEffect pour mettre à jour la position de la boîte toutes les 1 seconde
 useEffet(() => {
constante intervalle = setInterval(() => {
// Mettre à jour la position de la boîte en ajoutant 10 à la position actuelle
 setBoxPosition(prevPosition => prevPosition + 10);
 }, 1000);
// Renvoie une fonction de nettoyage pour effacer l'intervalle lorsque le composant
// démonte
retour() => clearInterval (intervalle);
 }, []);
// Définit la position de la boîte à l'aide de la variable d'état dans le style en ligne
constante boxStyle = {
 transformer: [{ traduireY: boxPosition }]
 };
retour (


 </View>
 );
};
constante styles = StyleSheet.create({
 récipient: {
 fléchir: 1,
 alignItems: 'centre',
 JustifierContenu: 'centre',
 },
 boîte: {
 largeur: 100,
 hauteur: 100,
 Couleur de l'arrière plan: 'bleu',
 },
});
exporterdéfaut application ;

Ce code rend une boîte bleue qui se déplace vers le bas chaque seconde. L'animation fonctionne en utilisant le utiliserEffet crochet pour créer une minuterie qui met à jour le boxPosition variable d'état toutes les 1 seconde.

Bien que cela puisse fonctionner dans certaines situations, ce n'est pas la meilleure option. Les mises à jour d'état dans React Native fonctionnent de manière asynchrone, mais les animations reposent sur des mises à jour d'état synchrones pour fonctionner correctement. L'implémentation de votre animation de manière asynchrone empêchera les mises à jour d'état d'être immédiatement reflétées dans la sortie rendue du composant, ce qui perturbera la synchronisation de vos animations.

Ce sont plusieurs bibliothèques d'animation comme la Animé bibliothèque, réagir-natif-réanimé, et réagir-natif-animable pour créer des animations performantes dans React Native. Chacune de ces bibliothèques d'animation résout le problème des mises à jour d'état asynchrones et est parfaitement idéale.

L'API d'animation native React

Animated est une API fournie par React Native. Vous pouvez l'utiliser pour créer des animations fluides qui répondent aux interactions de l'utilisateur ou aux changements d'état.

L'API Animated vous permet de créer des valeurs animées que vous pouvez interpoler et mapper à diverses propriétés de style de vos composants. Vous pouvez ensuite mettre à jour ces valeurs au fil du temps à l'aide de diverses méthodes d'animation. Les styles de vos composants seront alors mis à jour au fur et à mesure que les valeurs animées changent, ce qui donne des animations fluides.

Animated fonctionne très bien avec le système de mise en page de React Native. Pour cette raison, vos animations seront correctement intégrées au reste de votre interface utilisateur pour un look encore meilleur.

Pour commencer à utiliser Animated dans votre projet React Native, vous devez importer le Animé module de 'réagir-natif ' dans ton code :

importer { Animé } depuis'réagir natif';

Avec Animated importé, vous pouvez commencer à créer des animations. Pour cela, commencez par créer une valeur animée que vous manipulerez tout au long de l'animation :

constante valeuranimée = nouveau Animé. Valeur(0);

Le Animé. Valeur est une classe de l'API React Native Animated qui représente une valeur modifiable. Vous pouvez l'initialiser avec une valeur initiale, puis la mettre à jour au fil du temps à l'aide de diverses méthodes d'animation fournies par l'API Animated, telles que .Horaire(), .printemps(), et .carie(), en spécifiant la durée de l'animation, la fonction d'accélération et d'autres paramètres.

La valeur animée est similaire à une valeur d'état dans un composant React.

Vous pouvez initialiser un Animé. Valeur avec la valeur d'état initiale d'un composant, puis le mettre à jour au fil du temps à l'aide de la setState méthode.

Par exemple, vous avez un composant qui a une valeur d'état compter, qui représente le nombre de fois que l'utilisateur a cliqué sur ce bouton.

Vous pouvez créer un Animé. Valeur et l'initialiser avec la valeur d'état initial de compter:

constante Application = () => {
constante [count, setCount] = useState(0);
constante valeuranimée = nouveau Animé. Valeur (compte) ;
};

Ensuite, chaque fois que le compter mises à jour de la valeur d'état, vous pouvez mettre à jour valeuranimée aussi:

constante poignéeboutonClic = () => {
 setCounter (compter + 1);
 Animated.timing (animatedValue, {
 toValue: compter + 1,
 durée: 500,
 utiliserNativeDriver: vrai
 }).commencer();
};

Cet exemple met à jour valeuranimée en utilisant le Timing.animé() méthode chaque fois qu'un utilisateur clique sur le bouton. Le valeuranimée pilote l'animation et change de valeur en 500 millisecondes.

En relatant Animé. Valeur à une valeur d'état de cette façon, vous pouvez créer des animations qui répondent aux changements d'état de votre composant.

Maintenant que vous comprenez comment manipuler une valeur animée, vous pouvez ensuite interpoler la valeur animée et la mapper à une propriété de style de votre composant à l'aide de la Interpoler.animé() méthode.

Par exemple:

constante opacité = valeuranimée.interpoler({
 plage d'entrée: [0, 1],
 plage de sortie: [0, 1]
});
retour (

 {/* le contenu de votre composant */}
 </View>
);

Cela créera une animation qui s'estompe progressivement dans le Voir composant lorsque la valeur animée passe de 0 à 1.

Présentation des types d'animations

Comprendre les types d'animation et leur fonctionnement est important pour créer de bonnes animations.

En utilisant le useNativeDriver L'option avec animé améliore les performances. Cette option vous permet de décharger les animations sur le thread d'interface utilisateur natif. Il peut améliorer considérablement les performances en réduisant la quantité de traitement JavaScript nécessaire.

Cependant, tous les types d'animation ne prennent pas en charge le pilote natif. Essayer d'utiliser le pilote natif avec des animations qui impliquent des changements de couleur ou de mise en page peut entraîner un comportement inattendu.

De plus, les animations impliquant des séquences complexes peuvent entraîner des problèmes de performances importants sur les appareils dont la puissance de traitement ou la mémoire sont limitées. Ces déficits de performances peuvent également être notables si votre projet React Native exécute une version inférieure qui ne prendre en charge le moteur Hermès.

Comprendre les forces et les limites des différents types d'animation peut vous aider à choisir la bonne approche pour votre cas d'utilisation.

Soyez à l'aise avec les animations natives de React

Les animations sont un outil puissant pour créer des interfaces utilisateur attrayantes et dynamiques dans les applications React Native. L'API animée offre un moyen flexible et performant de créer des animations de séquences simples et complexes.

Néanmoins, il est important de prendre en compte l'impact des animations sur les performances et de choisir l'approche et la bibliothèque appropriées à utiliser pour votre situation.