Comment créer des animations interactives à l’aide de React Spring —

Dans cet article, nous explorerons React Spring, une bibliothèque d’animation basée sur JavaScript. Nous examinerons ses fonctionnalités, y compris les différents hooks et composants qu’il propose, et comment les utiliser dans les applications React.

Le concept d’animation dans les applications React est un aspect en constante évolution du développement frontend. Initialement, les animations dans React étaient réalisées à l’aide de transitions et d’animations CSS, mais à mesure que les applications React devenaient plus complexes, le besoin d’outils d’animation plus puissants est devenu évident. Cela a conduit au développement de bibliothèques d’animation basées sur JavaScript, telles que Framer Motion, Remotion et React Spring. Chacune de ces bibliothèques offre des fonctionnalités et des capacités uniques pour créer des animations dans React.

Connaissances de base

Cet article suppose que vous disposez des éléments suivants :

Introduction à React Spring

Réagir au printemps est une bibliothèque d’animation JavaScript utilisée pour créer des animations interactives dans les applications React. Contrairement aux animations CSS traditionnelles ou à d’autres bibliothèques d’animation React, React Spring utilise des animations basées sur la physique, qui imitent le mouvement du monde réel et créent un effet plus naturel.

Ces animations peuvent être appliquées à n’importe quelle propriété des composants React, notamment la position, l’échelle, l’opacité, etc. Cela en fait un outil puissant pour les développeurs cherchant à améliorer l’expérience utilisateur de leurs applications React avec des animations captivantes.

Mise en place de React Spring dans notre projet

Pour animer des composants de notre projet React à l’aide de React Spring, nous devons suivre ces étapes :

1. Téléchargez et installez la bibliothèque React Spring. Nous pouvons le faire soit en utilisant npm ou yarn:

   npm install react-spring
   

   yarn add react-spring
   

   Ces commandes installeront le react-spring bibliothèque et ses dépendances dans notre répertoire de projet.

2. Après avoir installé React Spring, nous devons importer les composants et hooks nécessaires dans nos composants React pour commencer à animer les éléments. Ceci peut être réalisé en utilisant ce qui suit syntaxe:

   import { animated, (hook) } from  'react-spring'
   

Dans l’extrait de code ci-dessus, nous importons deux dépendances (hook et animée) de la bibliothèque React Spring. Voici un aperçu du fonctionnement de chacun d’eux et pourquoi ils doivent être importés.

Animé

Dans React Spring, le animated L’espace de noms fournit un ensemble de composants utilisés pour animer des éléments dans notre application React. Il fournit les versions animées d’éléments HTML standards tels que <div>, <span>et <img>. Ces éléments animés peuvent être utilisés à la place de leurs éléments HTML normaux, ce qui nous permet de leur appliquer des animations à l’aide des hooks d’animation de React Spring.

Crochets

React Spring fournit plusieurs hooks qui aident à créer des animations dans les composants React. Ces hooks simplifient le processus de gestion des animations et facilitent leur intégration dans nos composants. Voici quelques-uns des principaux hooks fournis par React Spring :

• utiliserSpring. Ceci est généralement utilisé dans la plupart des cas car il crée une seule animation printanière qui modifie les données de l’état initial à un autre.

• utiliserTransition. Cela anime l’ajout, la suppression ou la réorganisation des éléments de la liste. Il gère le cycle de vie de l’animation des éléments lorsqu’ils entrent ou quittent le DOM, permettant des transitions fluides entre les différents états d’une liste.

• utiliserTrail. Ceci est utilisé pour créer plusieurs animations de ressorts qui créent un effet de « traînée », où chaque ressort suit ou les sentiers derrière le précédent.

• utiliserChaîne. Tout comme une chaîne, ceci est utilisé pour définir une séquence d’animations en spécifiant l’ordre dans lequel elles doivent se produire.

• utiliserSprings. Même si cela ressemble à useSpring, useSprings est utilisé pour gérer plusieurs animations printanières en même temps, tandis que useSpring gère une seule animation printanière.

Pour mieux comprendre leur fonctionnement, examinons les différents styles d’animation que nous pouvons réaliser avec chacun de ces hooks.

Utiliser useSpring pour créer des animations

Le useSpring Le hook dans React Spring est utilisé pour créer des animations en utilisant la physique du printemps. Il nous permet de définir les points de début et de fin d’une animation et utilise sa bibliothèque pour gérer la transition entre eux. Par exemple:

 const props = useSpring({ 
 opacity: 1,
  from: { opacity: 0 } 
  });

Dans cet exemple, nous avons créé une fonction qui change l’opacité d’un élément de 0 à 1. Cette fonction peut être appelée sur différents éléments en fonction de nos effets d’animation. Examinons les étapes à suivre lors de l’utilisation du useSpring crochet pour créer des animations…

Tout d’abord, importez les dépendances nécessaires à l’animation :

import { useSpring, animated } from "react-spring";

Ensuite, nous devons définir un composant et utiliser le useSpring crochet pour créer des valeurs animées. Le useSpring hook accepte deux arguments principaux :

1. Objet de configuration. Ceci définit les propriétés de notre animation, notamment :

   • depuis: l’état initial de la valeur animée (comme l’opacité : 0)
   • à: l’état cible de la valeur animée (comme l’opacité : 1)
   • configuration (facultatif): un objet pour affiner le comportement physique du ressort (comme la masse, la tension, le frottement)

2. Fonction de rappel (facultatif). Nous pouvons utiliser une fonction pour créer une configuration dynamique basée sur des accessoires ou des données.

Créer un useSpring l’animation peut être réalisée en utilisant deux méthodes différentes : en utilisant un objet littéral et en utilisant un paramètre de fonction.

Utiliser un objet littéral

Nous pouvons définir un objet avec les propriétés que nous souhaitons animer, telles que opacity ou coloret transmettez-le au useSpring crochet. Cette approche nous permet de spécifier directement les valeurs cibles de l’animation.

Pour expliquer comment cela fonctionne, créons un composant simple qui anime l’opacité d’un élément :

import React, { useState } from 'react';
import { useSpring, animated } from 'react-spring';

function App() {
  const [isVisible, setIsVisible] = useState(false);

  const opacityAnimation = useSpring({
    opacity: isVisible ? 1 : 0,
    config: {
      tension: 200, 
      friction: 20 
    }
  });

  const toggleVisibility = () => setIsVisible(!isVisible);

  return (
    <div>
      <button onClick={toggleVisibility} aria-label={isVisible ? 'Hide' : 'Show'}>
        {isVisible ? 'Hide' : 'Show'}
      </button>
      <animated.div style={opacityAnimation}>
        This text will fade in and out with spring physics.
      </animated.div>
    </div>
  );
}
export default App;

Dans cet extrait de code, nous créons un bouton qui bascule la visibilité de certains textes lorsque vous cliquez dessus. Pour ce faire, il utilise deux crochets, useState et useSpring.

Il utilise useState pour vérifier si le texte est visible ou non et crée une animation qui modifie l’opacité d’un texte en fonction de la condition :

opacity: isVisible ? 1 : 0

Cela donne un effet d’animation une fois le bouton qui appelle le toggleVisibility() la fonction est cliquée.

Utiliser un paramètre de fonction

Alternativement, nous pouvons passer une fonction au useSpring crochet. Cette fonction reçoit les valeurs animées précédentes et renvoie un objet avec les valeurs mises à jour pour l’animation. Cela nous donne plus de contrôle sur le comportement de l’animation au fil du temps :

 const opacityConfig = {
    tension: 300,
    friction: 40,
  };

  
  const opacityAnimation = useSpring(() => ({
    opacity: isVisible ? 1 : 0,
    config: opacityConfig,
  }));

Dans cette approche, la configuration (tension et frottement) est extraite dans un objet séparé — opacityConfig – et cela offre une plus grande flexibilité pour le contrôle dynamique basé sur l’état ou les accessoires.

Animation d’éléments de liste avec useTransition

UseTransition est un hook React Spring qui anime les éléments des tableaux à mesure qu’ils sont ajoutés ou supprimés du DOM. C’est particulièrement utile pour créer des animations fluides dans des listes ou des modaux. Pour ce faire, il accepte une liste de configurations possibles :

• from définit les styles initiaux pour les éléments entrant dans le DOM.
• enter spécifie les styles à animer lorsque des éléments sont ajoutés. Nous pouvons créer des animations en plusieurs étapes en fournissant un tableau d’objets.
• leave définit les styles appliqués lorsque des éléments sont supprimés du DOM.
• update contrôle comment animer les modifications entre les éléments existants.
• key nous permet de définir explicitement une clé unique pour chaque élément. Cela permet de définir des animations spécifiques pour des éléments individuels.
• from et to avec des transitions : celles-ci peuvent être utilisées dans enter, leaveet update pour des animations plus complexes avec des états de début et de fin définis indépendamment.

Pour illustrer comment useTransition fonctionne, créons un composant qui ajoute et supprime des éléments d’un tableau :

import React, { useState } from "react";
import { useTransition, animated } from "react-spring";

function App() {
  const [items, setItems] = useState([]);

  const addItem = () => {
    const newItem = `Item ${items.length + 1}`;
    setItems([...items, newItem]);
  };

  const removeItem = () => {
    if (items.length === 0) return;
    const newItems = items.slice(0, -1);
    setItems(newItems);
  };

  const transitions = useTransition(items, {
    from: { opacity: 0, transform: "translate3d(0, -40px, 0)" },
    enter: { opacity: 1, transform: "translate3d(0, 0, 0)" },
    leave: { opacity: 0, transform: "translate3d(0, -40px, 0)" },
  });

  return (
    <div className="transitionDiv">
      <div>
        <button onClick={addItem}>Add Item</button>
        <button onClick={removeItem}>Remove Item</button>
      </div>
      <div className="transitionItem">
        {transitions((style, item) => (
          <animated.div style={style} className ='list'>{item}</animated.div>
        ))}
      </div>
    </div>
  );
}

export default App;

Dans cet exemple, nous avons un App composant qui gère une liste d’éléments. Il fournit des boutons pour ajouter ou supprimer dynamiquement des éléments de la liste. Quand le Ajouter un item est cliqué sur le bouton, un nouvel élément est ajouté au tableau et lorsque le Retirer l’objet est cliqué sur le bouton, le dernier élément est supprimé du tableau.

Le useTransition hook est utilisé pour gérer les transitions des éléments du tableau. Chaque fois que le tableau change (en raison de l’ajout ou de la suppression d’éléments), useTransition gère les animations pour ces changements selon la configuration spécifiée (définie par le from, enteret leave propriétés).

Animation de tableaux sans modifications

S’il n’y a aucun changement dynamique dans le tableau lui-même, comme l’ajout ou la suppression d’éléments, useTransition peut toujours être utilisé pour animer chaque élément du tableau. Par exemple:

import { useTransition, animated } from "@react-spring/web";
import "./App.css";

const name = "Product1";
const name1 = "Product2";
const name2 = "Product3";

function App({ data = [name, name1, name2] }) {
  const transitions = useTransition(data, {
    from: { scale: 0 },
    enter: { scale: 1 },
    leave: { scale: 0.5 },
    config: { duration: 2500 },
  });

  return transitions((style, item) => (
    <div className="nameBody">
      <animated.div style={style} className="nameDiv">
        {item}
      </animated.div>
    </div>
  ));
}

export default App;

Dans cet exemple, le App Le composant affiche une liste d’éléments et applique des animations à chaque chargement de la page.

Création d’animations séquentielles avec useTrail

Le useTrail l’animation est utilisée pour créer une série de transitions animées pour un groupe ou une liste d’éléments de l’interface utilisateur.

Contrairement aux méthodes d’animation traditionnelles qui animent les éléments individuellement, useTrail permet d’animer des éléments les uns après les autres, créant ainsi un effet « traînée ». Ceci est généralement utilisé lors de la création de listes dynamiques, de galeries d’images, de transitions de page ou de tout scénario dans lequel les éléments doivent s’animer de manière séquentielle.

Voici la structure de base de la syntaxe :

const trail = useTrail(numberOfItems, config, [trailOptions]);

Décomposons cela :

1. numberOfItems. Il s’agit d’un nombre obligatoire qui précise combien d’éléments nous souhaitons animer dans le « parcours ».

2. config. Il s’agit d’un objet qui définit les propriétés d’animation de chaque élément du parcours. Chaque clé de l’objet représente une propriété d’animation et sa valeur peut être basée sur l’animation prévue. Par exemple:

   from: { opacity: 0, transform: 'translateX(50%)' },
   to: { opacity: 1, transform: 'translateX(0)' },
   transition: {
     duration: 500,
     easing: 'easeInOutCubic',
   },
   

3. trailOptions (facultatif). Il s’agit d’une gamme d’options supplémentaires pour le sentier. Certaines options courantes sont :

   • trailKey: une fonction pour générer des clés uniques pour chaque élément du trail (utile pour la réconciliation React).
   • reset: une fonction pour réinitialiser toutes les animations du parcours.

Voyons comment cela fonctionne :

import React, { useState, useEffect } from "react";
import { useTrail, animated } from "react-spring";

function App() {
  const [items, setItems] = useState([
    { id: 1, content: "This is a div illustrating a trail animation" },
    { id: 2, content: "This is a div illustrating a trail animation" },
    { id: 4, content: "This is a div illustrating a trail animation" },
    { id: 5, content: "This is a div illustrating a trail animation" },
  ]);
 []);

  const trail = useTrail(items.length, {

    from: { opacity: 1, transform: "translateY(0px)" },
    to: { opacity: 0, transform: "translateY(100px)" },
    delay: 400, 
    duration: 2000, 
  });

  return (
    <div className="container">
      {trail.map((props, index) => (
        <animated.div key={items[index].id} style={props} className="item">
          {items[index].content}
        </animated.div>
      ))}
    </div>
  );
}

export default App;

Dans l’extrait de code ci-dessus, nous créons un CardCarousel composant qui utilise le useTrail hook pour créer une piste d’animations pour chaque carrousel de cartes en fonction de la longueur des éléments du tableau.

Remarque : pour en savoir plus sur le useEffect crochet, regarde Comprendre React useEffect.

const trail = useTrail(items.length, {

  from: { opacity: 1, transform: "translateY(0px)" },
  to: { opacity: 0, transform: "translateY(100px)" },
  delay: 400, 
  duration: 2000, 
});

Ici, il définit les états initial et final de l’animation (de et vers) ainsi que la configuration de transition (durée et accélération) qui affecte la façon dont l’animation est affichée.

Rendu de chaque carte

Pour restituer chaque carte, le composant renvoie un <div> avec la classe card-carousel et des cartes sur le réseau de sentiers pour restituer chaque carte animée. Chaque carte est ensuite enveloppée dans un animated.div composant appliquant les styles d’animation (opacité et transformation) définis dans le useTrail crochet:

return (
    <div className="container">
      {trail.map((props, index) => (
        <animated.div key={items[index].id} style={props} className="item">
          {items[index].content}
        </animated.div>
      ))}
    </div>
  );

Maîtriser les séquences d’animation avec useChain

Contrairement aux animations autonomes, useChain est utilisé pour relier plusieurs animations entre elles et définit une séquence sur la façon dont les animations prédéfinies sont exécutées. Ceci est particulièrement utile lors de la création d’interfaces utilisateur dynamiques où les éléments doivent s’animer les uns après les autres.

Regardons la syntaxe.

useChain accepte un tableau de références d’animation et un objet de configuration facultatif. Chaque référence d’animation représente une animation distincte et elles sont exécutées dans l’ordre dans lequel elles apparaissent dans le tableau. Nous pouvons également spécifier des délais pour chaque animation afin de contrôler le timing de la séquence en utilisant cette syntaxe :

useChain([ref1, ref2, ref3], { delay: 200 });

Pour illustrer comment cela fonctionne, créons un composant qui applique deux animations sur différents éléments et contrôle les animations à l’aide de useChain:

import "./App.css";

import React, { useRef } from "react";
import {
  useTransition,
  useSpring,
  useChain,
  animated,
  useSpringRef,
} from "react-spring";

const data = ["", "", "", ""];

function App() {
  const springRef = useSpringRef();
  const springs = useSpring({
    ref: springRef,
    from: { size: "20%" },
    to: { size: "100%" },
    config: { duration: 2500 },
  });

  const transRef = useSpringRef();
  const transitions = useTransition(data, {
    ref: transRef,
    from: { scale: 0, backgroundColor: "pink" },
    enter: { scale: 1, backgroundColor: "plum" },
    leave: { scale: 0, color: "pink" },
    config: { duration: 3500 },
  });

  useChain([springRef, transRef]);

  return (
    <animated.div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "400px",
        width: springs.size,
        background: "white",
      }}
    >
      {transitions((style, item) => (
        <animated.div
          style={{
            width: "200px",
            height: "200px",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            textAlign: "center",
            marginLeft: "50px",
            color: "white",
            fontSize: "35px",
            borderRadius: "360px",
            ...style,
          }}
          className="products"
        >
          {item}
        </animated.div>
      ))}
    </animated.div>
  );
}

export default App;

Dans le code ci-dessus, nous créons deux animations différentes, en utilisant useString et useTransitionet en utilisant le useChain pour gérer les différentes animations :

useChain([springRef, transRef]);

Création de plusieurs animations à l’aide du hook useSprings

Comme nous l’avons mentionné plus tôt, useSprings est utilisé pour créer plusieurs animations printanières en même temps, et chacune de ces animations a ses configurations. Cela nous permet d’animer plusieurs éléments ou propriétés indépendamment au sein du même composant. Par exemple:

import { useSprings, animated } from "@react-spring/web";

function App() {
  const [springs, api] = useSprings(
    3,
    () => ({
      from: { scale: 0, color: "blue" },
      to: { scale: 1, color: "red" },
      config: { duration: 2500 },
    }),
    []
  );

  return (
    <div>
      {springs.map((props) => (
        <animated.div style={props} className="springsText">
          _______
        </animated.div>
      ))}
    </div>
  );
}

export default App;

Dans cet exemple, useSprings gère un tableau d’animations printanières, chacune représentant l’animation d’un élément du tableau d’éléments. Chaque élément de la liste est associé à une configuration Spring qui définit les valeurs initiales et cibles des propriétés de couleur et d’échelle. React Spring anime ensuite chaque élément en fonction de sa configuration correspondante.

Conclusion

React Spring est une puissante bibliothèque d’animations qui nous permet de créer des animations époustouflantes et interactives dans nos applications React. Comme nous l’avons vu, ces animations peuvent être appliquées sur différents éléments de nos projets.

En tirant parti des fonctionnalités de React Spring, nous pouvons obtenir des transitions plus fluides avec des effets plus naturels et un meilleur contrôle sur nos animations.