Animation React sans effort : un guide sur le mouvement Framer

TL;DR : Cet article de blog fournit un guide complet utilisant Framer Motion, une bibliothèque d'animation React. Il couvre des concepts clés tels que les composants de mouvement, les variantes et les transitions et fournit des exemples pratiques de création d'animations de bouton de fondu, de barre latérale coulissante, de modale déplaçable et de retournement de carte.

Notre première priorité en tant que développeurs front-end est de créer des applications Web qui maintiennent l'engagement des utilisateurs. Ceci est possible en créant des pages interactives et en offrant une meilleure expérience utilisateur.

Les animations rendent vos pages interactives ; ils guident les utilisateurs et rendent les interactions intéressantes. De petits mouvements visuels sur la page, tels que l'interaction de l'utilisateur, les événements ou la navigation dans la page, donnent une impression de vivacité, comme si nous interagissions avec un être vivant répondant à nos actions.

L'animation, en termes simples, est un moyen de modifier visuellement les éléments en mettant à jour leurs propriétés ou dimensions au fil du temps lors d'interactions ou de certains événements. Par exemple, un indicateur de chargement qui montre que votre action est en cours.

Il existe deux façons d'animer un élément sur la page Web (deux façons de modifier les propriétés de l'élément).

1. Grâce à CSS, des bibliothèques comme Animate.css fournissent un ensemble de classes d'animation qui peuvent être ajoutées aux éléments HTML.
2. Grâce à JavaScript, des bibliothèques comme Framer Motion manipulent les propriétés de l'élément DOM au moment de l'exécution via le code.

Dans cet article, nous explorerons Framer Motion, l'une des bibliothèques d'animation les plus populaires. Il offre simplicité et flexibilité et est conçu pour fonctionner avec des frameworks frontend modernes comme React.

Pourquoi Framer Motion ?

Framer Motion est une bibliothèque d'animation prête pour la production pour React qui crée des animations simples comme des transitions et des interactions complexes basées sur les gestes grâce à sa syntaxe déclarative. Il comporte :

• Facilité d'utilisation : Framer Motion est extrêmement simple et facile à utiliser, grâce à ses API et méthodes intuitives.
• Flexibilité : Il peut être utilisé pour créer des animations complexes comme un panoramique, un glisser-déposer, un pincement ou des animations simples comme un fondu, une transition.
• Performances : Les composants Motion sont optimisés pour les performances, car ils sont rendus en dehors du cycle de vie de React pour fonctionner correctement et garantir une expérience utilisateur transparente.
• Communauté et support : Des documents détaillés, de nombreux exemples et une grande adoption par la communauté facilitent le démarrage.

Premiers pas avec Framer Motion

Ajoutez la bibliothèque Framer Motion à votre projet à l'aide du gestionnaire de packages npm ou yarn.

npm install framer-motion

Ou

npm install framer-motion

Une fois la dépendance chargée, vous pouvez l'inclure dans votre projet pour créer des animations interactives.

yarn add framer-motion

Notions de base

Composants de mouvement :

Framer Motion est livré avec une liste de composants de mouvement pour créer des animations à 120 ips. Il fournit une prise en charge des gestes qui contient tous les éléments HTML (comme motion.div) et les éléments SVG courants (comme motion.square) qui sont des composants React spéciaux qui peuvent être utilisés.

// On Client side
import { motion } from "motion/react"

// On Server-side 
import * as motion from "motion/react-client"

Accessoires et API :

Framer Motion fournit une liste d'API comme accessoires, tels que initial, animate et exit qui définissent le comportement de l'animation.

<motion.div className="card" />

L'accessoire

Initial est déclenché lors du montage du composant, animate est déclenché lorsque le composant est mis à jour et l'accessoire exit est déclenché lorsque le composant est démonté. Reportez-vous au guide complet d'animation Framer Motion pour plus de détails.

Les composants de mouvement sont indépendants du cycle de vie ou du cycle de rendu de Reacts pour des performances améliorées. Ainsi, nous devrions nous appuyer sur l'état React pour l'animation, plutôt que d'utiliser les valeurs de mouvement qui mettront à jour les styles sans déclencher de nouveaux rendus.

<motion.button
  initial={{opacity: 0}}
  animate={{opacity: 1}}
  transition={{duration: 1}}
  exit={{opacity: 0}}
>
  Click Me
</motion.button>

Les variantes incluent :

• listVariants : Définit le comportement de l'animation pour toute la liste, nous transmettons les valeurs des variantes sur les accessoires qui accéderont aux propriétés lors de son tir. initial=”hidden” et animate=”visible”. staggerChildren garantit que les éléments enfants s'animent en séquence.
• itemVariants : Définit le comportement d'animation des éléments de la liste.
• Les composants motion.ul et motion.li héritent des variantes pour créer une animation coordonnée.

Composants personnalisés : Tout composant React peut être converti en composant de mouvement en le passant via la fonction motion.create().

import { motion, useMotionValue } from "framer-motion";

const MotionState = () => {
  const xPosition = useMotionValue(0);

  useEffect(() => {
    // It won’t trigger a re-render on the component
    const interval = setInterval(() => {
    xPosition.set(xPosition.get() + 100);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <motion.div
   >



<p>In the previous example, the <strong>motion.div</strong> element will be translated by 100px on the x position (horizontally, translateX(100px)) at an interval of 1s.</p>

<p><strong>Variants:</strong> framer-motion provides support for the variants, which allows the reuse of animation configurations across multiple elements.<br>
</p>

<pre class="brush:php;toolbar:false">const AnimatedList = () => {
  const listVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
       opacity: 1,
       y: 0,
       transition: {
           staggerChildren: 0.2,
      },
    },
  };

  const itemVariants = {
      visible: { opacity: 1 },
    hidden: { opacity: 0 },
  };

  return (
    <motion.ul initial="hidden" animate="visible" variants={listVariants}>
    {[1, 2, 3].map((item) => (
        <motion.li key={item} variants={itemVariants}>
        Item {item}
        </motion.li>
    ))}
    </motion.ul>
  );
};

Par défaut, tous les accessoires de mouvement seront filtrés lors de leur transmission au composant React. L'animation sera appliquée au composant, mais vous ne pourrez pas accéder aux accessoires dans React.

Pour accéder aux accessoires de mouvement, passez le drapeau forwardMotionProps: true lors de la création du composant de mouvement.

const ReactComponent = (props) => {
  return <button {...props}>ClickMe>/button>;
};

const MotionComponent = motion.create(ReactComponent);

const FadingButton2 = () => {
  return (
    <MotionComponent
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    transition={{ duration: 3 }}
    >
    Click Me
    </MotionComponent>
  );
};

La fonction motion.create() accepte également une chaîne qui créera le composant de mouvement d'un élément DOM personnalisé.

const MotionComponent = motion.create(ReactComponent, {
  forwardMotionProps: true,
});

Remarque : Évitez d'utiliser le motion.create() dans les méthodes de cycle de vie de React comme (useEffect), car cela entraînerait créez un nouveau composant à chaque fois que la méthode de cycle de vie est déclenchée.

Maintenant que vous avez une bonne idée du fonctionnement de Framer Motion et de ses API, voyons quelques exemples de la façon dont vous pouvez l'utiliser pour une animation courante.

Exemples

Un bouton qui s'estompe

npm install framer-motion

• initial : Définit l'état initial du bouton opacity:0, lorsque l'élément n'est pas la fenêtre.
• animate : Définit l'état du bouton sur opacity:1 lorsque l'élément est dans la fenêtre.
• transition : Configure la transition de l'animation ; le bouton mettra une seconde pour passer de opacity:0 à opacity:1
• exit : Définit l'état du bouton lorsque l'élément sort de la fenêtre.

La propriété exit ne prend effet que lorsqu'elle est enveloppée dans le composant AnimatePresence.

yarn add framer-motion

AnimatePresence affecte les enfants directs, qui sont des composants de mouvement qui sont supprimés de l'arborescence des composants React.

Cela peut se produire lorsque le composant est mis à jour lors du changement du cycle de vie (montage, mise à jour, démontage)

// On Client side
import { motion } from "motion/react"

// On Server-side 
import * as motion from "motion/react-client"

Sa clé change

<motion.div className="card" />

Les enfants sont ajoutés ou supprimés de la liste.

<motion.button
  initial={{opacity: 0}}
  animate={{opacity: 1}}
  transition={{duration: 1}}
  exit={{opacity: 0}}
>
  Click Me
</motion.button>

Barre latérale coulissante

import { motion, useMotionValue } from "framer-motion";

const MotionState = () => {
  const xPosition = useMotionValue(0);

  useEffect(() => {
    // It won’t trigger a re-render on the component
    const interval = setInterval(() => {
    xPosition.set(xPosition.get() + 100);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <motion.div
   >



<p>In the previous example, the <strong>motion.div</strong> element will be translated by 100px on the x position (horizontally, translateX(100px)) at an interval of 1s.</p>

<p><strong>Variants:</strong> framer-motion provides support for the variants, which allows the reuse of animation configurations across multiple elements.<br>
</p>

<pre class="brush:php;toolbar:false">const AnimatedList = () => {
  const listVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
       opacity: 1,
       y: 0,
       transition: {
           staggerChildren: 0.2,
      },
    },
  };

  const itemVariants = {
      visible: { opacity: 1 },
    hidden: { opacity: 0 },
  };

  return (
    <motion.ul initial="hidden" animate="visible" variants={listVariants}>
    {[1, 2, 3].map((item) => (
        <motion.li key={item} variants={itemVariants}>
        Item {item}
        </motion.li>
    ))}
    </motion.ul>
  );
};

Les

Transition Les accessoires jouent un rôle crucial dans l'animation. Ils contrôlent la progression des animations au fil du temps. Framer Motion prend en charge plusieurs propriétés pour une animation fluide.

• durée : Durée de l'animation (en secondes)
• délai : Retarde le début de l'animation (en secondes)
• ease : Un ensemble de fonctions d'assouplissement qui préconisent la façon dont l'animation va progresser (« ease », « easeIn », « easeInOut »)

Modal déplaçable

Framer Motion prend également en charge les animations interactives avec des gestes tels que survoler, appuyer et faire glisser.

const ReactComponent = (props) => {
  return <button {...props}>ClickMe>/button>;
};

const MotionComponent = motion.create(ReactComponent);

const FadingButton2 = () => {
  return (
    <MotionComponent
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    transition={{ duration: 3 }}
    >
    Click Me
    </MotionComponent>
  );
};

• Page : Enveloppe le composant enfant avec l'animation de mouvement.
• Initial, animer, & sortie : Gère l'apparition et la disparition du composant sur la navigation de la page.

Conclusion

Merci d'avoir lu ! Framer Motion est une puissante bibliothèque d'animations qui facilite l'ajout d'animations époustouflantes aux composants React. Il vous aide à créer une animation simple pour gérer des interactions complexes basées sur des gestes. Il existe des possibilités infinies avec Framer Motion pour ajouter des interactions à vos applications React.

La nouvelle version d'Essential Studio® est disponible pour les clients existants sur la page Licence et téléchargements. Si vous êtes nouveau, inscrivez-vous pour notre essai gratuit de 30 jours pour découvrir nos fonctionnalités.

N'hésitez pas à nous contacter via notre forum d'assistance, notre portail d'assistance ou notre portail de commentaires. Nous sommes toujours là pour vous aider !

Blogs connexes

• Top 5 des visionneuses React PDF pour une gestion fluide des documents
• Top 5 des bibliothèques de graphiques React pour 2025
• Vite.js : créez des frontends plus rapides
• RxJS pour React : débloquer les états réactifs

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!