Les animations peuvent donner vie à une application, la rendant plus attrayante et intuitive pour l’utilisateur. Mais si vous êtes novice en matière d’animations React Native, les débuts peuvent être un peu décourageants.
Explorez les animations React Native et découvrez comment vous pouvez commencer à créer de belles animations fluides.
Comment fonctionnent les animations de base de React Native ?
Les animations peuvent créer des transitions fluides entre différents écrans ou éléments. Elles peuvent mettre en évidence des informations ou fournir un retour d’information sur les actions de l’utilisateur. Les animations peuvent être simples ou complexes et faire appel à diverses techniques, telles que les graphiques animés en 2D ou en 3D.
La portabilité de React Native fait qu’il vaut la peine de l’utiliser si vous visez plusieurs plateformes. L’une de ses principales caractéristiques est la possibilité de créer de superbes animations pour les applications mobiles.
Vous pouvez animer un objet React Native en modifiant simplement l’état de la position du composant souhaité.
Par exemple :
import React, { useState, useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
const App = () => {
// Initialize state to track the box position
const [boxPosition, setBoxPosition] = useState(0);
// Use the useEffect hook to update the box position every 1 second
useEffect(() => {
const interval = setInterval(() => {
// Update the box position by adding 10 to the current position
setBoxPosition(prevPosition => prevPosition + 10);
}, 1000);
// Return a cleanup function to clear the interval when the component
// unmounts
return () => clearInterval(interval);
}, []);
// Set the box position using the state variable in the inline style
const boxStyle = {
transform: [{ translateY: boxPosition }]
};
return (
<View style={styles.container}>
<View style={[styles.box, boxStyle]} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
box: {
width: 100,
height: 100,
backgroundColor: 'blue',
},
});
export default App;
Ce code affiche une boîte bleue qui se déplace vers le bas toutes les secondes. L’animation fonctionne en utilisant la fonction useEffect pour créer un timer qui met à jour le positionBoîte variable d’état toutes les 1 secondes.
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 asynchrone de votre animation fera que les mises à jour d’état ne seront pas immédiatement reflétées dans le rendu du composant, ce qui perturbera la synchronisation de vos animations.
Il existe plusieurs bibliothèques d’animation comme la bibliothèque Animé bibliothèque, react-native-reanimatedet react-native-animatable pour construire 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 animée de React Native
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 dans le 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 permet d’obtenir des animations fluides.
Animated fonctionne très bien avec le système de mise en page de React Native. Grâce à cela, vos animations seront correctement intégrées au reste de votre interface utilisateur pour une apparence encore plus agréable.
Pour commencer à utiliser Animated dans votre projet React Native, vous devez importer le fichier Animé module de ‘react-native’ dans votre code :
import { Animated } from 'react-native';
Avec Animated imported, vous pouvez commencer à créer des animations. Pour ce faire, créez d’abord une valeur animée que vous manipulerez tout au long de l’animation :
const animatedValue = new Animated.Value(0);
La valeur Valeur.animée est une classe de l’API Animated de React Native qui représente une valeur mutable. Vous pouvez l’initialiser avec une valeur initiale, puis la mettre à jour au fil du temps en utilisant diverses méthodes d’animation fournies par l’API Animated, comme .timing(), .spring()et .decay()en spécifiant la durée de l’animation, la fonction d’assouplissement 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 de l’état initial d’un composant, puis la mettre à jour au fil du temps à l’aide de la fonction setState méthode.
Par exemple, vous avez un composant qui a une valeur d’état comptequi représente le nombre de fois où l’utilisateur a cliqué sur ce bouton.
Vous pouvez créer un Animé.Valeur et l’initialiser avec la valeur de l’état initial de compte :
const App = () => {
const [count, setCount] = useState(0);
const animatedValue = new Animated.Value(count);
};
Ensuite, chaque fois que le compte En cas de mise à jour de la valeur de l’état, vous pouvez mettre à jour la valeur de l’état. valeur animée aussi :
const handlebuttonClick = () => {
setCounter(count + 1);
Animated.timing(animatedValue, {
toValue: count + 1,
duration: 500,
useNativeDriver: true
}).start();
};
Cet exemple met à jour valeur animée à l’aide de la fonction Animé.timing() chaque fois qu’un utilisateur clique sur le bouton. La méthode valeur animée entraîne l’animation, et la valeur change sur 500 millisecondes.
En se rapportant Valeur.animée En attribuant de cette manière une valeur d’état à un composant, vous pouvez créer des animations qui répondent aux changements d’état de votre composant.
Maintenant que vous savez comment manipuler une valeur animée, vous pouvez aller de l’avant pour interpoler la valeur animée et la faire correspondre à une propriété de style de votre composant à l’aide de la fonction Animated.interpolate() méthode.
Par exemple :
const opacity = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 1]
});
return (
<View style={{ opacity }}>
{/* your component content */}
</View>
);
Cela créera une animation qui s’estompe progressivement dans le Voir lorsque la valeur animée passe de 0 à 1.
Comprendre les types d’animation
Il est important de comprendre les types d’animation et leur fonctionnement pour créer de bonnes animations.
Utiliser l’outil useNativeDriver avec l’option Animated améliore les performances. Cette option vous permet de décharger les animations sur le thread natif de l’interface utilisateur. Elle 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.
En outre, 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 est limitée. Ces déficits de performance peuvent également être notables si votre projet React Native exécute une version inférieure qui ne prend pas en charge le moteur Hermes.
Comprendre les forces et les limites des différents types d’animation peut vous aider à choisir la bonne approche pour votre cas d’utilisation.
La gestion de l’eau et des eaux usées dans le monde
Les animations sont un outil puissant pour créer des interfaces utilisateur attrayantes et dynamiques dans les applications React Native. L’API Animated offre un moyen flexible et performant de créer des animations de séquences simples et complexes.
Il est tout de même important de prendre en compte l’impact des animations sur les performances et de choisir l’approche et la bibliothèque appropriées à votre situation.
