Gruppo Framer Motion8 minuti di lettura·Dal team ExodeUI
Padroneggiare la fisica primaverile in Framer Motion e ExodeUI
Guida completa alla fisica delle molle in Framer Motion. Padroneggia rigidità, smorzamento, massa e restDelta e scopri l'authoring visivo con ExodeUI.
Sintesi e definizione
Punto chiave
La fisica primaverile in Framer Motion sostituisce le curve di facilità basate sul tempo con la simulazione fisica. Governate da rigidità (tensione), smorzamento (attrito) e massa, le molle calcolano automaticamente la durata in base alla distanza e alla velocità di input, garantendo che le interazioni non sembrino mai brusche o lente.
I tre parametri delle molle Framer Motion
In Framer Motion, la transizione: { type: "spring" } accetta tre parametri fisici primari:
- rigidità: valori più alti (ad esempio 500) si agganciano rapidamente al bersaglio; i valori più bassi (ad esempio 150) scivolano delicatamente.
- smorzamento: controlla il ritorno. Uno smorzamento inferiore a 20 provoca un notevole rimbalzo; lo smorzamento intorno a 28 crea un ambiente pulito e professionale.
- massa: moltiplica la quantità di moto e la distanza di decelerazione. L'impostazione predefinita è 1.0.
Estratto di implementazione in produzione
Implementazione del componente interattivo
// 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>
);