Animations et Transitions

Utilisation de Framer Motion

Framer Motion est une bibliothèque d'animation puissante et facile à utiliser pour React. Voici un exemple simple d'animation avec Framer Motion :

Installation de Framer Motion

Commencez par installer Framer Motion via npm :

npm install framer-motion

Exemple d'animation avec Framer Motion

📋 Copier le code

import React from 'react';
import { motion } from 'framer-motion';

function App() {
return (
<motion.div
	initial={{ opacity: 0, scale: 0.5 }}
	animate={{ opacity: 1, scale: 1 }}
	transition={{ duration: 0.5 }}
	style={{ width: 100, height: 100, backgroundColor: 'blue' }}
/>
);
}

export default App;

Explication du code :

• motion.div : Un composant animé de Framer Motion.
• initial : Définit l'état initial de l'animation (opacité 0 et échelle 0.5).
• animate : Définit l'état final de l'animation (opacité 1 et échelle 1).
• transition : Définit la durée de l'animation (0.5 seconde).

Utilisation de React Spring

React Spring est une autre bibliothèque d'animation populaire qui utilise des animations basées sur la physique. Voici un exemple simple d'animation avec React Spring :

Installation de React Spring

Commencez par installer React Spring via npm :

npm install @react-spring/web

Exemple d'animation avec React Spring

📋 Copier le code

import React from 'react';
import { useSpring, animated } from '@react-spring/web';

function App() {
const props = useSpring({
from: { opacity: 0, transform: 'translateX(-100%)' },
to: { opacity: 1, transform: 'translateX(0%)' },
config: { duration: 500 },
});

return (
<animated.div style={props}>
	<h1>Bonjour, React Spring !</h1>
</animated.div>
);
}

export default App;

Explication du code :

• useSpring : Un hook qui définit les propriétés de l'animation.
• from : Définit l'état initial de l'animation (opacité 0 et translation à gauche).
• to : Définit l'état final de l'animation (opacité 1 et translation à la position d'origine).
• animated.div : Un composant animé de React Spring.

Transitions entre les routes : Navigation animée avec React Router et Framer Motion

Vous pouvez également ajouter des transitions fluides lors des changements de route dans une application React. Voici un exemple avec React Router et Framer Motion :

Ce code met en place une navigation avec des transitions fluides entre les pages grâce à React Router et Framer Motion. Cela permet d'animer les changements de page en douceur.

1. Installation des dépendances

Avant d'utiliser ce code, assurez-vous d'installer les bibliothèques nécessaires :

📋 Copier le code

npm install react-router-dom framer-motion

2. Code du composant App

Le fichier suivant gère la navigation et applique des animations à chaque transition de page.

📋 Copier le code

import React from 'react';
import { BrowserRouter as Router, Route, Switch, useLocation } from 'react-router-dom';
import { AnimatePresence, motion } from 'framer-motion';
import Home from './Home';
import About from './About';

function App() {
const location = useLocation();

return (
<AnimatePresence>
	<Switch location={location} key={location.pathname}>
		<Route exact path="/">
			<motion.div
				initial={{ opacity: 0 }}
				animate={{ opacity: 1 }}
				exit={{ opacity: 0 }}
			>
				<Home />
			</motion.div>
		</Route>
		<Route path="/about">
			<motion.div
				initial={{ opacity: 0 }}
				animate={{ opacity: 1 }}
				exit={{ opacity: 0 }}
			>
				<About />
			</motion.div>
		</Route>
	</Switch>
</AnimatePresence>
);
}

export default function AppWrapper() {
return (
<Router>
	<App />
</Router>
);
}

Explication du code :

• React Router est utilisé pour gérer la navigation entre les pages.
• Framer Motion ajoute des animations lors des transitions de page.
• AnimatePresence permet de gérer les animations de sortie des composants lorsqu'ils disparaissent.
• Les composants motion.div animent chaque page en modifiant leur opacité au montage et au démontage.
• initial, animate, exit : Définissent les états d'animation pour l'entrée, l'affichage et la sortie des composants.

4. Résumé

Ce code permet de créer une navigation fluide avec des transitions d'apparition et de disparition des pages, offrant une meilleure expérience utilisateur.

Conclusion

Vous avez maintenant une solide compréhension des animations et transitions en React. Que ce soit pour animer des composants, créer des transitions fluides entre les routes, ou utiliser des bibliothèques comme Framer Motion et React Spring, ces techniques vous permettront de rendre vos interfaces utilisateur plus dynamiques et engageantes.

Pour continuer votre apprentissage, découvrez comment améliorer l'accessibilité de vos applications React dans le chapitre suivant : Accessibilité en React.