Grappe Framer Motion8 minutes de lecture·Par l’équipe ExodeUI
Maîtriser la physique des ressorts dans Framer Motion & ExodeUI
Guide complet de la physique du printemps dans Framer Motion. Maîtrisez la rigidité, l'amortissement, la masse et le restDelta, et découvrez la création visuelle avec ExodeUI.
Résumé et définition
À retenir
La physique des ressorts dans Framer Motion remplace les courbes d'aisance basées sur le temps par une simulation physique. Régis par la rigidité (tension), l'amortissement (frottement) et la masse, les ressorts calculent automatiquement la durée en fonction de la distance et de la vitesse d'entrée, garantissant ainsi que les interactions ne semblent jamais brusques ou lentes.
Les trois paramètres des ressorts Framer Motion
Dans Framer Motion, la transition : { type : "spring" } prend trois paramètres physiques principaux :
- rigidité : des valeurs plus élevées (par exemple 500) s'accrochent rapidement à la cible ; les valeurs inférieures (par exemple 150) glissent doucement.
- Amortissement : contrôle le rebond. Un amortissement inférieur à 20 provoque des rebonds notables ; un amortissement autour de 28 crée un réglage propre et professionnel.
- masse : multiplie la quantité de mouvement et la distance de décélération. La valeur par défaut est 1,0.
Extrait d’implémentation en production
Implémentation du composant interactif
// Framer Motion Spring Transition
import { motion } from 'framer-motion';
export const SnappyModal = () => (
<motion.div
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{
type: 'spring',
stiffness: 420,
damping: 26,
mass: 0.9
}}
className="modal-box p-8 rounded-2xl bg-zinc-900 text-white"
>
Physics-Driven Modal
</motion.div>
);