Les animations peuvent être un excellent moyen d'améliorer l'expérience utilisateur de votre application React. Ils peuvent aider à rendre les interactions plus fluides et peuvent également fournir un retour visuel ou attirer l'attention sur un élément particulier.

Il existe de nombreuses façons de travailler avec des animations CSS à l'aide de React, d'une solution native à des bibliothèques tierces.

Pourquoi utiliser des animations dans React ?

Il existe de nombreuses raisons pour lesquelles vous pourriez vouloir utiliser des animations dans votre application React. Certaines des raisons les plus courantes incluent:

  • Rendre les interactions plus naturelles. Les animations peuvent aider à rendre les interactions des utilisateurs plus naturelles et fluides. Par exemple, si vous utilisez un composant bascule, vous souhaiterez peut-être animer le bouton bascule entre les états "on" et "off". Un autre exemple est les barres de progression, vous pouvez créer une barre de progression animée pour les pages de votre application React.
    • instagram viewer
  • Fournir un retour visuel. Les animations peuvent fournir un retour visuel à l'utilisateur. Par exemple, si un utilisateur clique sur un bouton, vous souhaiterez peut-être animer le bouton pour indiquer que l'application a enregistré cette action.
  • Guider l'attention de l'utilisateur. Les animations peuvent guider l'attention de l'utilisateur sur un élément particulier. Par exemple, si vous avez une boîte de dialogue modale qui apparaît à l'écran, vous souhaiterez peut-être utiliser une animation pour attirer l'attention de l'utilisateur sur celle-ci.
  • Créer un sentiment d'urgence.Les animations peuvent créer un sentiment d'urgence ou d'importance. Par exemple, si vous avez un composant de minuterie qui compte à rebours, vous souhaiterez peut-être utiliser une animation pour refléter l'urgence à mesure que l'échéance approche.

Il existe plusieurs façons d'ajouter des animations aux composants React. Les trois que vous apprendrez à utiliser ici sont les animations de style en ligne, la bibliothèque react-animations et la bibliothèque react-simple-animate.

Commencez par créer une application de réaction de base, puis suivez la méthode de votre choix.

Méthode 1: Utilisation d'animations de style en ligne

Par exemple, supposons que vous vouliez animer un composant pour qu'il apparaisse en fondu lorsque vous cliquez sur un bouton. Vous pouvez le faire avec le code suivant :

importer Réagir, { Composant } depuis 'réagir';
classeDisparaîtres'étendComposant{
constructeur(accessoires) {
super(accessoires);


ce.état = {
 est visible: FAUX
 };
 }


rendre() {
constante styles = {
opacité: ce.État.est visible? 1: 0,
 transition: 'opacité 2s'
 };


retour (
<div>
<div style={styles}>
 Bonjour le monde!
</div>
<bouton onClick={this.toggleVisibility}>
 Basculer
</button>
</div>
 );
 }


toggleVisibility = () => {
ce.setState (prevState => ({
est visible: !étatpréc.est visible
 }));
 }
}
exporterdéfaut Disparaître;

Dans cet exemple, un objet de style possède des propriétés d'opacité et de transition. L'opacité est de 0 lorsque le composant n'est pas visible et de 1 lorsqu'il l'est. La propriété de transition est "opacity 2s", ce qui entraînera une transition de l'opacité sur deux secondes lorsqu'elle change.

Le bouton bascule la visibilité du composant. Lorsque quelqu'un clique sur le bouton, la variable d'état isVisible est mise à jour et le composant apparaît ou disparaît en fonction de son état actuel.

Méthode 2: Utilisation de la bibliothèque react-animations

Une autre façon d'ajouter des animations aux composants React consiste à utiliser une bibliothèque telle que react-animations. Cette bibliothèque fournit un ensemble d'animations prédéfinies que vous pouvez utiliser dans vos composants React.

Pour utiliser react-animations, vous devez d'abord installer la bibliothèque :

npm installer réagir-animations --sauvegarder

Vous devez également installer aphrodite, qui est une dépendance de react-animations :

npm installer Aphrodite --sauvegarder

Une fois que vous avez installé les bibliothèques, vous pouvez importer les animations que vous souhaitez utiliser :

importer { Faire apparaitre en fondue, faire disparaitre en fondue } depuis 'réagir-animations';

Ensuite, vous pouvez utiliser les animations dans vos composants :

importer Réagir, { Composant } depuis 'réagir';
importer { Feuille de style, css } depuis 'Aphrodite';
importer { Faire apparaitre en fondue, faire disparaitre en fondue } depuis 'réagir-animations';
constante styles = StyleSheet.create({
 fondu à l'entrée: {
 nom de l'animation: fondu enchaîné,
 animationDurée: '2s'
 },
 disparaître: {
 nom de l'animation: fondu en sortie,
 animationDurée: '2s'
 }
});


classeDisparaîtres'étendComposant{
constructeur(accessoires) {
super(accessoires);


ce.état = {
 est visible: FAUX
 };
 }


rendre() {
constante NomClasse = ce.state.isVisible? css (styles.fadeIn): css (styles.fadeOut);


retour (
<div>
<div nom_classe={nom_classe}>
 Bonjour le monde!
</div>
<bouton onClick={this.toggleVisibility}>
 Basculer
</button>
</div>
 );
 }


toggleVisibility = () => {
ce.setState (prevState => ({
est visible: !étatpréc.est visible
 }));
 }
}
exporterdéfaut Disparaître;

Cet exemple commence par importer les animations fadeIn et fadeOut de la bibliothèque react-animations. Il définit ensuite un objet styles avec les animations fadeIn et fadeOut, et animationDuration défini sur deux secondes.

Le bouton basculera la visibilité du composant. Lorsque quelqu'un clique dessus, la variable d'état isVisible se met à jour et le composant apparaît ou disparaît en fonction de son état actuel.

Méthode 3: Utilisation de la bibliothèque react-simple-animate

La bibliothèque react-simple-animate fournit un moyen simple d'ajouter des animations aux composants React. Il propose une API déclarative qui permet de définir facilement des animations complexes.

Pour utiliser la bibliothèque, vous devez d'abord l'installer :

npm installer réagir-simple-animer --sauvegarder

Ensuite, vous pouvez l'utiliser dans vos composants :

importer Réagir, { Composant } depuis 'réagir';
importer { Animer, Animer des images clés} depuis "réagir-simple-animer" ;
classeApplications'étendComposant{
 rendre() {
retour (
<div>
<Animer
 jouer
commencer={{
 opacité: 0
 }}
fin={{
 opacité: 1
 }}
>
<div>
 Bonjour le monde!
</div>
</Animate>
<Animer des images clés
 jouer
 durée={2}
 images clés={[
 { opacité: 0, transformation: 'translateX(-100px)' },
 { opacité: 1, transformation: 'translateX(0px)' }
 ]}
>
<div>
 Bonjour le monde!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
exporterdéfaut application ;

Le Animer le composant se fond dans un élément div. Il commence par une opacité de 0 et se termine par une opacité de 1. Le play prop est défini sur true, ce qui entraînera la lecture automatique de l'animation lors du montage du composant.

Le Animer des images clés Le composant anime un élément div pendant deux secondes. Le tableau d'images clés spécifie les états de début et de fin de l'animation. La première image clé a une opacité de 0 et une valeur translateX de -100px. La deuxième image clé a une opacité de 1 et une valeur translateX de 0px.

Augmentez l'engagement des utilisateurs avec des animations

Vous savez maintenant comment utiliser les animations dans votre application React. Vous pouvez utiliser des animations pour augmenter l'engagement des utilisateurs avec votre application.

Par exemple, vous souhaiterez peut-être utiliser une animation pour récompenser l'utilisateur pour l'accomplissement d'une tâche. Cela peut être quelque chose d'aussi simple qu'une courte animation "spinner" ou une animation plus complexe qui se joue lorsque l'utilisateur termine un niveau dans un jeu.

Vous pouvez également déployer gratuitement votre application React sur le Web avec des services comme les pages Github ou Heroku.