Clúster Framer Motion8 minutos de lectura·Por el equipo de ExodeUI
Dominar la física de primavera en Framer Motion y ExodeUI
Guía completa de física de resortes en Framer Motion. Domine la rigidez, la amortiguación, la masa y el resto Delta, y descubra la creación visual con ExodeUI.
Resumen directo y definición
Idea clave
La física de resortes en Framer Motion reemplaza las curvas de facilidad basadas en el tiempo con simulación física. Gobernados por la rigidez (tensión), la amortiguación (fricción) y la masa, los resortes calculan automáticamente la duración en función de la distancia y la velocidad de entrada, lo que garantiza que las interacciones nunca se sientan abruptas o lentas.
Los tres parámetros de los resortes Framer Motion
En Framer Motion, la transición: { tipo: "spring" } toma tres parámetros físicos principales:
- rigidez: los valores más altos (por ejemplo, 500) se ajustan al objetivo rápidamente; Los valores más bajos (por ejemplo, 150) se deslizan suavemente.
- amortiguación: Controla el rebote. La amortiguación por debajo de 20 provoca un rebote notable; la amortiguación alrededor de 28 crea un asentamiento limpio y profesional.
- masa: Multiplica el impulso y la distancia de desaceleración. El valor predeterminado es 1.0.
Fragmento de implementación en producción
Implementación del componente interactivo
// 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>
);