Création d'animations en utilisant React Spring

L'intégration d'animations dans vos applications React a été traditionnellement difficile. Cependant, React-Spring, une bibliothèque puissante créée par Paul Henschel, simplifie considérablement le processus. S'appuyant sur l'animation et la réaction, il offre des performances optimisées et une API rationalisée.

Ce didacticiel explore deux des cinq crochets de React-Spring: useSpring et useTrail . Nous illustrerons leur utilisation à travers des exemples pratiques.

Pour commencer, installez React-Spring:

 # fil
fil Ajouter une react-spring

# npm
NPM INSTALLATION REACT-SPRING - SAVE

Animer avec useSpring

Le crochet useSpring facilite les transitions en douceur entre les états. Nous définissons from propriétés et to propriétés pour spécifier les points de début et de fin de l'animation. from fixe l'état initial, tout to dictant l'état final.

Notre premier exemple utilise useSpring pour animer une boîte glissant sur l'écran. Initialement caché, il apparaît lorsqu'un bouton est cliqué.

 Importer React, {UseState} de 'react';
import {usingPring, animé} à partir de «react-spring»;

const app = () => {
  const [showContent, setShowContent] = UseState (false);
  const de contenuprops = usingPring ({
    OPCITACE: ShowContent? 1: 0,
    Margintop: ShowContent? 0: -1000,
    Config: {durée: 500} // Facultatif: Ajouter une durée d'animation
  });

  retour (
    <div classname="container">
      <button classname="button" onclick="{()"> SetShowContent (! ShowContent)}>
        Basculer le contenu
      </button>
      <animated.div classname="box" style="{contentProps}">
        <h1 id="Ce-contenu-a-glissé-grâce-à-React-Spring">Ce contenu a glissé grâce à React Spring!</h1>
      </animated.div>
    </div>
  ));
};

Le crochet useSpring gère l'animation. Lorsque showContent est vraie, la boîte glisse vers le bas et devient visible; Sinon, il reste caché hors écran.

Animer les listes avec useTrail

Le crochet useTrail anime une liste d'éléments séquentiellement. Chaque élément anime après celui précédent. Reprenons une liste des utilisateurs et animant leur rendu.

 Importer React, {UseState, useEffecte} depuis 'react';
import {usetrail, animé} de 'react-spring';

const app = () => {
  const [utilisateurs, SetUsers] = UseState ([]);
  useEFFECT (() => {
    fetch ('https://jsonplaceholder.typicode.com/users')
      .Then (res => res.json ())
      .Then (data => SetUsers (data));
  }, []);

  const Trail = usetrail (users.length, {{
    De: {marginleft: -20, opacité: 0, transform: 'tradlate3d (0, -40px, 0)'},
    à: {marginleft: 20, opacité: 1, transform: 'tradlate3d (0,0px, 0)'},
    Config: {Mass: 5, Tension: 2000, Friction: 200} // Facultatif: Animation finale
  });

  retour (
    <div>
      <h1 id="Utilisateurs-aléatoires">Utilisateurs aléatoires</h1>
      {trail.map (({style}, index) => (
        <animated.div key="{users[index]?.id}" classname="box" style="{style}">
          {utilisateurs [index]?. Nom d'utilisateur}
        </animated.div>
      ))}
    </div>
  ));
};

useTrail crée une animation échelonnée pour la liste d'utilisateurs. Chaque nom d'utilisateur glisse avec un léger retard. La gestion des erreurs et la configuration facultative pour les animations plus lisses sont incluses.

Conclusion

React Spring fournit une approche conviviale de l'animation dans les applications React. Explorez sa documentation approfondie et ses exemples pour débloquer des possibilités d'animation créatives. N'oubliez pas de considérer l'accessibilité lors de la mise en œuvre d'animations.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!