Animación de primavera: la física del movimiento natural de la interfaz de usuario
Aprenda cómo funciona la animación de primavera en el diseño de la interfaz de usuario. Comprender la rigidez, la amortiguación, la masa y la velocidad. Cree animaciones basadas en la física natural para React y SwiftUI.
Idea clave
La animación de resorte modela el movimiento de la interfaz de usuario utilizando el comportamiento físico de un sistema masa-resorte-amortiguador, donde el movimiento de un componente se rige por la rigidez (la fuerza con la que tira hacia el reposo), la amortiguación (la rapidez con la que pierde energía) y la masa (cuánta inercia lleva). A diferencia de las animaciones basadas en la duración, los resortes responden automáticamente a la velocidad del usuario y pueden interrumpirse en cualquier punto sin causar discontinuidad visual.
Por qué los resortes se sienten más naturales que las curvas de duración
El mundo físico no tiene conceptos como "facilidad de entrada y salida" o "cúbico-bézier (0,4, 0, 0,2, 1)". Los objetos físicos se aceleran debido a fuerzas y desaceleran debido a la fricción. Cuando un cajón se abre, tiene impulso; cuando lo sueltas, la fricción lo detiene. La física de Spring replica esta realidad física en el software, razón por la cual iOS UIKit, Android Motion Compose y ExodeUI son todos sistemas de animación de Spring.
Parámetros del resorte explicados
Comprender cada parámetro le permite diseñar exactamente la sensación física que desea.
Rigidez (tensión)
Con qué fuerza tira el resorte hacia su valor en reposo. La alta rigidez (600+) crea una interfaz de usuario ágil y receptiva, como una respuesta al presionar un botón. La baja rigidez (100–200) crea un movimiento lento y flotante adecuado para transiciones de páginas o elementos flotantes ambientales.
Amortiguación (fricción)
Cuánta energía pierde el resorte por ciclo. En una amortiguación crítica, el resorte llega al reposo sin oscilar. Los resortes subamortiguados (baja fricción) se sobrepasarán y rebotarán. La relación amortiguación / (2 × sqrt (rigidez × masa)) determina si está subamortiguado, críticamente amortiguado o sobreamortiguado.
Masa
Cuánta inercia lleva el elemento animado. Una masa mayor hace que la animación parezca más pesada y tarde más en cambiar de dirección. La mayoría de las animaciones de la interfaz de usuario mantienen la masa en 1,0 y controlan la sensación mediante la rigidez y la amortiguación.
Velocidad inicial
Si el usuario desliza o arroja un elemento, el resorte se puede inicializar con esa velocidad del gesto, creando una continuidad perfecta entre el gesto y el asentamiento del resorte.
Prácticos ajustes preestablecidos de primavera para componentes de interfaz de usuario
Estos ajustes preestablecidos cubren los patrones de interacción de la interfaz de usuario más comunes.
- Pulsación de botón: rigidez 500, amortiguación 30: rebote instantáneo, ágil y mínimo
- Expansión de la tarjeta: rigidez 280, amortiguación 24, masa 1,2: expansión suave y ponderada
- Cajón/chapa: rigidez 340, amortiguación 28 — decisiva, con ligero asentamiento
- Notificación de rebote: rigidez 400, amortiguación 18: exceso divertido
- Transición de página: rigidez 220, amortiguación 22, masa 1,4 - cinemática, ponderada
Fragmento de implementación en producción
// Spring presets in React with the Motion library (motion.dev).
// The same stiffness / damping / mass values can be saved as motion tokens.
import { motion } from 'motion/react';
const springs = {
snappy: { type: 'spring', stiffness: 500, damping: 30, mass: 1 },
smooth: { type: 'spring', stiffness: 280, damping: 24, mass: 1.2 },
bouncy: { type: 'spring', stiffness: 400, damping: 18, mass: 1 },
cinematic: { type: 'spring', stiffness: 220, damping: 22, mass: 1.4 },
};
export function PhysicsCard({ open }) {
return (
<motion.div
animate={{ y: open ? 0 : 24, scale: open ? 1 : 0.96 }}
transition={springs.smooth}
>
Smooth physics-based card reveal
</motion.div>
);
}