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.

Comment fonctionne Framer Motion

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 :

<div>div>

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

<motion.div>motion.div>

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

Animation dans Framer Motion

Avant d'utiliser Framer Motion dans votre projet, vous devez

instagram viewer
Exécution Node.js et le gestionnaire de paquets Yarn installé 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 le fichiers de démarrage branche comme modèle de démarrage à suivre avec ce didacticiel, ou le fichiers-finals branche pour la démo complète. Vous pouvez également voir le projet en action via ce démo en direct.

Ouvrez votre terminal et lancez :

git clone [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
fil
dev de fil

Lorsque vous ouvrez hôte local: 5173 dans 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 le src/App.jsx fichier dans un éditeur de code. Ce fichier contient un composant fonctionnel qui renvoie un fragment React. Importez le Bouton composant, puis le rendre, en passant dans un texte soutenir:


Bouton animé</h4>
Déplacez votre souris sur le bouton pour voir l'effet</div>

Ensuite, modifiez le Bouton.jsx fichier et importer le mouvement utilité de encadreur-mouvement:

importer { mouvement } depuis"framer-mouvement"

Maintenant, remplacez le régulier bouton élément avec le mouvement.[élément] composant. Dans ce cas, utilisez le motion.bouton composant.

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

escalader: 1.1 }}>
{texte}
</motion.button>

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 Animation CSS plutôt. 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. Dans Backdrop.jsx, importez l'utilitaire de mouvement et créez un composant fonctionnel avec sur clic et enfants accessoires. Retourne un motion.div composant avec la classe "backdrop" et sur clic auditeur dans le JSX.

exporterdéfautfonctionToile de fond() {
retour (<>

 </motion.div>
 </>)
}

Ajoutez ensuite trois accessoires à savoir: initial, animer, et sortie. 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.

Ajouter sur clic et enfants accessoires à la motion.div et réglez la durée de la transition sur 0,34 seconde :

exporterdéfautfonctionToile de fond ({onClick, les enfants}){
retour (<>
 onClick={onClick}
 NomClasse="toile de fond"
 initiale={{ opacité: 0, toile de fondFiltre:"flou (0px)" }}
 animer={{ opacité: 1, toile de fondFiltre:"flou (3.4px)" }}
 sortie={{ opacité: 0, toile de fondFiltre:"flou (0px)"}}
 passage={{
 durée: 0.34,
 }}
 >
 {enfants}
 </motion.div>
 </>)
}

Le Toile de fond le composant est un wrapper pour le Modal composant. Cliquer sur le fond fait disparaître le modal. Dans Modal.jsx, importer mouvement et le composant Backdrop. Le composant fonctionnel par défaut accepte les accessoires: closeModal et texte. Créez une variable de variante en tant qu'objet.

constante variantes = {
 initial: {
 y: "-200%",
 opacité: 1,
 },
 visible: {
 y: "50%",
 transition: {
 durée: 0.1,
 taper: "printemps",
 amortissement: 32,
 raideur: 500
 }
 },
 sortie: {
 y: "200%",
 }
 }

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.


 onClick={(e) => e.stopPropagation()}
 NomClasse="modal"
 variantes={variantes}
 initiale='initial'
 animer ='visible'
 sortie='sortie'
 >
 {texte}
 </motion.div>
</Backdrop>

Ensuite, vous devez ajouter la fonctionnalité pour afficher le modal lorsqu'un utilisateur clique sur le bouton. Ouvrez le App.jsx fichier et importer le useState Le crochet React et le Modal composant.

importer { useState } depuis"réagir";
importer Modal depuis"./composants/Modal";

Créez ensuite un modalOuvrir état avec la valeur par défaut définie sur FAUX.

constante [modalOpen, setModalOpen] = useState(FAUX);

Ensuite, définissez une fonction closeModal qui fixe le modalOuvrir à faux.

fonctioncloseModal() {
 setModalOpen(FAUX)
}

En haut du fragment React, rendez conditionnellement un Modal composant et passer le bon texte prop avec le prop closeModal.

{modalOuvrir && <Modaltexte="Ceci est un modal animé avec Framer Motion"}

Puis, dans la seconde section élément, rendre un bouton é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'un AnimerPrésence composant. Importer AnimatePresence depuis encadreur-mouvement.

importer {AnimerPrésence} depuis'framer-motion';

Maintenant, encapsulez le composant Modal dans le composant AnimatePresence et définissez le initial prop à false et le mode attendre".

FAUX}mode="attendez">
 {modalOuvrir && <Modaltexte="Ceci est un modal animé avec Framer Motion"closeModal={fermerModal} />}
</AnimatePresence>

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 le whileInView soutenir. Ouvrez le ScrollElement.jsx, et importez le mouvement utilitaire. Changement div pour motion.div avec la classe "scroll-element".

 initiale={{ opacité: 0, escalader: 0, tourner: 14 }}
 whileInView={{ opacité: 1, escalader: 1, tourner: 0 }}
 passage={{ durée: .8 }}
 fenêtre d'affichage={{ une fois: vrai }}
 NomClasse='élément de défilement'
>
 Élément de défilement
</motion.div>

Le fenêtre prop pointe vers un objet qui définit une fois pour vrai. Ensuite, dans le App.jsx fichier, importez le Élément de défilement et définissez une variable scrollElementCount contenant une valeur entière.

laisser scrollElementCount=14;

À la fin section élément, créez un tableau avec une longueur spécifique définie par scrollElementCount qui mappe sur chaque élément du tableau et génère un composant avec une clé unique basée sur l'index je.

{[...Tableau (scrollElementCount)].map((x, je) =><Élément de défilementclé={je} />)}

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

Alternatives à Framer Motion

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 Ressort de réaction.

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.

Améliorer l'expérience utilisateur avec des animations

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.