Nouvelles

May 12, 2023

Comment ajouter des animations à vos applications React avec Framer Motion

Apprenez à ajouter des animations simples à votre application React avec un minimum de codage

Apprenez à ajouter des animations simples à votre application React avec un minimum d'effort de codage.

L'animation est un élément crucial de presque toutes les applications Web modernes. C'est aussi l'une des parties les plus difficiles à maîtriser.

Framer Motion est une bibliothèque conçue pour React qui facilite l'animation de composants.

Framer Motion utilise le composant de mouvement pour les animations. Chaque élément HTML/SVG a un composant de mouvement équivalent qui a des accessoires pour les gestes et les animations. Par exemple, un div HTML standard ressemble à ceci :

Alors que l'équivalent de Framer Motion ressemble à ceci :

Les composants de mouvement prennent en charge unanimer prop qui déclenche des animations lorsque ses valeurs changent. Pour les animations complexes, utilisez leutiliserAnimercrochet avec une portée réf.

Avant d'utiliser Framer Motion dans votre projet, vous devez avoir le runtime Node.js et le gestionnaire de packages Yarn installés sur votre ordinateur et comprendre ce qu'est React et comment l'utiliser.

Vous pouvez afficher et télécharger le code source de ce projet à partir de son référentiel GitHub. Utilisez lefichiers de démarragebranche comme modèle de démarrage à suivre avec ce didacticiel, ou lefichiers-finals branche pour la démo complète. Vous pouvez également voir le projet en action via cette démo en direct.

Ouvrez votre terminal et lancez :

Lorsque vous ouvrezhôte local : 5173dans votre navigateur, vous verrez ceci :

Vous pouvez maintenant créer votre première animation simple, un bouton qui grandit au survol et rétrécit lorsque le curseur part.

Ouvrez lesrc/App.jsx fichier dans un éditeur de code. Ce fichier contient un composant fonctionnel qui renvoie un fragment React. Importez leBoutoncomposant, puis le rendre, en passant dans untextesoutenir:

Ensuite, modifiez leBouton.jsxfichier et importer lemouvementutilité deencadreur-mouvement:

Maintenant, remplacez le régulierboutonélément avec lemouvement.[élément] composant. Dans ce cas, utilisez lemotion.boutoncomposant.

Ajoutez ensuite untout en survolantgeste prop et passez un objet de valeurs que Framer Motion doit animer lorsqu'un utilisateur survole le bouton.

Le bouton s'animera désormais lorsque vous déplacerez le pointeur de votre souris dessus ou en dehors :

Vous vous demandez peut-être pourquoi cette démo n'utilise pas les animations CSS à la place. Framer Motion présente des avantages par rapport à CSS car il s'intègre à l'état React et se traduit généralement par un code plus propre.

Ensuite, essayez quelque chose de plus complexe : animer un modal. DansBackdrop.jsx, importez l'utilitaire de mouvement et créez un composant fonctionnel avecsur clicetenfants accessoires. Retourne unmotion.divcomposant avec la classe "backdrop" etsur clicauditeur dans le JSX.

Ajoutez ensuite trois accessoires à savoir :initial,animer,etsortie . Ces accessoires représentent l'état d'origine du composant, l'état dans lequel le composant doit être animé et l'état dans lequel le composant doit être après l'animation, respectivement.

Ajoutersur clicetenfantsaccessoires à lamotion.divet réglez la durée de la transition sur 0,34 seconde :

LeToile de fondle composant est un wrapper pour leModal composant. Cliquer sur le fond fait disparaître le modal. DansModal.jsx, importermouvement et le composant Backdrop. Le composant fonctionnel par défaut accepte les accessoires :closeModalettexte . Créez une variable de variante en tant qu'objet.

Renvoie un composant motion.div enveloppé par un composant Backdrop avec un accessoire "variants" pointant vers l'objet variants. Les variantes sont un ensemble d'états d'animation prédéfinis dans lesquels le composant peut se trouver.

Ensuite, vous devez ajouter la fonctionnalité pour afficher le modal lorsqu'un utilisateur clique sur le bouton. Ouvrez leApp.jsxfichier et importer leuseStateLe crochet React et leModalcomposant.

Créez ensuite unmodalOuvrirétat avec la valeur par défaut définie surFAUX.

Ensuite, définissez une fonctioncloseModalqui fixe lemodalOuvrirc'est faux.

En haut du fragment React, rendez conditionnellement unModalcomposant et passer le bontexteprop avec le prop closeModal.

Puis, dans la secondesectionélément, rendre unboutonélément avec un gestionnaire d'événements onClick qui définit modalOpen sur false.

Vous remarquerez peut-être que React démonte le composant Modal du DOM sans animation de sortie. Pour résoudre ce problème, vous avez besoin d'unAnimerPrésence composant. Importer AnimatePresence depuisencadreur-mouvement.

Maintenant, encapsulez le composant Modal dans le composant AnimatePresence et définissez leinitialprop à false et lemodeattendre".

Le composant AnimatePresence permet aux animations de sortie de se terminer avant que React ne le démonte du DOM.

Framer Motion peut animer des composants sur le défilement en utilisant lewhileInView soutenir. Ouvrez leScrollElement.jsx, et importez lemouvement utilitaire. Changementdivpourmotion.divavec la classe "scroll-element".

Lefenêtreprop pointe vers un objet qui définitune foispourvrai . Ensuite, dans leApp.jsxfichier, importez leÉlément de défilementet définissez une variable scrollElementCount contenant une valeur entière.

À la finsectionélément, créez un tableau avec une longueur spécifique définie parscrollElementCountqui mappe sur chaque élément du tableau et génère un composant avec une clé unique basée sur l'indexje.

Maintenant, en revenant au navigateur, les éléments doivent s'animer lorsque vous les faites défiler dans la vue.

Framer Motion n'est pas la seule bibliothèque d'animation sur le marché. Si vous n'aimez pas la façon dont Framer Motion fait les choses, vous pouvez essayer d'autres bibliothèques comme React Spring.

Vous pouvez également utiliser des animations CSS, que tous les navigateurs modernes prennent en charge de manière native, mais les techniques impliquées peuvent être difficiles à apprendre et à configurer.

Chaque utilisateur s'attend à une expérience fluide et fluide lorsqu'il utilise une application Web. Un site Web ou une application sans animations semble statique et ne répond pas. Les animations améliorent l'expérience utilisateur car vous pouvez les utiliser pour communiquer des commentaires à l'utilisateur lorsqu'il effectue une certaine action.

David Uzondu est un développeur JavaScript avec plus de 3 ans d'expérience. Il aime écrire pendant son temps libre.