Animations par gestes : survol, appui et glissement
Utilisez les propriétés whileHover, whileTap et drag pour animer les composants selon les gestes de l’utilisateur.
Animations par gestes : survol, appui et glissement est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Présentation des propriétés de geste
Les propriétés de geste de Framer Motion animent les composants en réponse aux actions de l’utilisateur sans gestionnaires d’événements JavaScript. Les principales sont whileHover, whileTap, whileDrag et whileFocus.
whileHover
Définit l’état animé lorsque le curseur survole l’élément. L’état revient automatiquement à la normale lorsque le curseur quitte l’élément.
<motion.button
whileHover={{ scale: 1.05, boxShadow: '0 10px 30px rgba(0,0,0,0.15)' }}
transition={{ type: 'spring', stiffness: 400, damping: 17 }}
>
Hover me
</motion.button>whileTap
Définit l’état animé lorsque l’élément est pressé. C’est idéal pour fournir un retour visuel lors de l’appui sur un bouton.
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
Click
</motion.button>whileFocus
Anime l’élément lorsqu’il reçoit le focus du clavier — idéal pour créer des indicateurs de focus accessibles.
<motion.input
whileFocus={{ borderColor: '#4f46e5', boxShadow: '0 0 0 3px rgba(79,70,229,0.3)' }}
transition={{ duration: 0.2 }}
/>Activer le glissement
Ajoutez la propriété drag pour rendre un élément déplaçable. Définissez-la sur true, 'x' ou 'y' pour limiter le déplacement à un axe.
<motion.div
drag
dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
whileDrag={{ scale: 1.1, cursor: 'grabbing' }}
style={{ cursor: 'grab' }}
>
Drag me
</motion.div>dragConstraints avec une référence
Limitez le glissement à un élément conteneur à l’aide d’une référence plutôt que de valeurs en pixels — l’élément déplaçable ne peut pas sortir du conteneur.
const constraintsRef = useRef(null);
<div ref={constraintsRef} style={{ overflow: 'hidden', width: 300, height: 300 }}>
<motion.div
drag
dragConstraints={constraintsRef}
style={{ width: 80, height: 80, background: '#4f46e5' }}
/>
</div>dragElastic
dragElastic contrôle l’amplitude du déplacement de l’élément au-delà de ses limites (0 = aucune élasticité, 1 = élasticité totale).
<motion.div
drag
dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
dragElastic={0.2} // slight rubber-band effect
/>dragSnapToOrigin
Définir dragSnapToOrigin fait revenir l’élément avec un effet de ressort à sa position d’origine lorsqu’il est relâché.
<motion.div
drag
dragSnapToOrigin
dragElastic={0.5}
style={{ width: 60, height: 60, background: '#e11d48', borderRadius: '50%' }}
/>Événements de panoramique
Utilisez onPanStart, onPan et onPanEnd pour suivre la position du curseur pendant les gestes de panoramique sans activer le mode de glissement complet.
<motion.div
onPan={(event, info) => {
console.log('Point:', info.point.x, info.point.y);
console.log('Delta:', info.delta.x, info.delta.y);
}}
/>Événements de glissement
Écoutez les événements du cycle de vie du glissement : onDragStart, onDrag et onDragEnd. L’objet info contient la vitesse et le décalage.
<motion.div
drag="x"
onDragEnd={(event, info) => {
if (info.velocity.x > 500) onSwipeRight();
if (info.velocity.x < -500) onSwipeLeft();
}}
/>Schéma de balayage de carte
Implémentez un balayage de type Tinder en utilisant la vitesse de glissement pour détecter la direction du balayage au relâchement.
function SwipeCard({ onSwipe }) {
return (
<motion.div
drag="x"
dragConstraints={{ left: 0, right: 0 }}
dragElastic={0.7}
onDragEnd={(_, info) => {
if (Math.abs(info.velocity.x) > 400) {
onSwipe(info.velocity.x > 0 ? 'right' : 'left');
}
}}
/>
);
}Vérification rapide
Quelle propriété de Framer Motion fait revenir un élément déplacé à sa position d’origine lorsqu’il est relâché ?
Récapitulatif
Utilisez whileHover, whileTap et whileFocus pour les animations d’états interactifs. Ajoutez drag pour rendre les éléments déplaçables, limitez leur déplacement avec dragConstraints et utilisez la vitesse de onDragEnd pour détecter les balayages.
Questions Fréquemment Posées
La leçon « Animations par gestes : survol, appui et glissement » est-elle gratuite ?
Oui — le texte complet de « Animations par gestes : survol, appui et glissement » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Animations par gestes : survol, appui et glissement » ?
Utilisez les propriétés whileHover, whileTap et drag pour animer les composants selon les gestes de l’utilisateur. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Animations par gestes : survol, appui et glissement » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Composants Motion et animations de base
- Variantes pour des animations orchestrées
- Animations par gestes : survol, appui et glissement
- Animations de mise en page et AnimatePresence