Animação de primavera: a física do movimento natural da interface do usuário
Aprenda como a animação de primavera funciona no design de UI. Entenda rigidez, amortecimento, massa e velocidade. Crie animações baseadas em física natural para React e SwiftUI.
Ponto principal
A animação de mola modela o movimento da IU usando o comportamento físico de um sistema massa-mola-amortecedor, onde o movimento de um componente é governado pela rigidez (quão forte ele puxa em direção ao repouso), amortecimento (quão rápido ele perde energia) e massa (quanta inércia ele carrega). Ao contrário das animações baseadas em duração, as molas respondem automaticamente à velocidade do usuário e podem ser interrompidas a qualquer momento sem causar descontinuidade visual.
Por que as molas parecem mais naturais do que as curvas de duração
O mundo físico não possui conceitos como "facilidade de entrada" ou "bezier cúbico (0,4, 0, 0,2, 1)". Objetos físicos aceleram devido a forças e desaceleram devido ao atrito. Quando uma gaveta se abre, ela ganha impulso; quando você o solta, o atrito o faz parar. A física do Spring replica essa realidade física no software, e é por isso que iOS UIKit, Android Motion Compose e ExodeUI são todos sistemas de animação spring-first.
Parâmetros de primavera explicados
Compreender cada parâmetro permite projetar exatamente a sensação física desejada.
Rigidez (tensão)
Quão fortemente a mola puxa em direção ao seu valor de repouso. A alta rigidez (600+) cria uma interface de usuário ágil e responsiva, como feedback ao pressionar um botão. A baixa rigidez (100–200) cria um movimento lento e flutuante, adequado para transições de páginas ou elementos flutuantes no ambiente.
Amortecimento (fricção)
Quanta energia a mola perde por ciclo. No amortecimento crítico, a mola atinge o repouso sem oscilar. Molas subamortecidas (baixa fricção) irão ultrapassar e saltar. A relação amortecimento / (2 × sqrt(rigidez × massa)) determina se você está subamortecido, criticamente amortecido ou superamortecido.
Massa
Quanta inércia o elemento animado carrega. Uma massa maior faz com que a animação pareça mais pesada e demore mais para mudar de direção. A maioria das animações da interface do usuário mantém a massa em 1,0 e controla a sensação por meio de rigidez e amortecimento.
Velocidade Inicial
Se o usuário deslizar ou arremessar um elemento, a mola poderá ser inicializada com essa velocidade do gesto, criando uma continuidade perfeita entre o gesto e o assentamento da mola.
Predefinições práticas de Spring para componentes de UI
Essas predefinições abrangem os padrões de interação da IU mais comuns.
- Toque no botão: rigidez 500, amortecimento 30 – salto instantâneo, rápido e mínimo
- Expansão da placa: rigidez 280, amortecimento 24, massa 1,2 – expansão suave e ponderada
- Gaveta/folha: rigidez 340, amortecimento 28 — decisivo, com ligeiro assentamento
- Notificação saltitante: rigidez 400, amortecimento 18 – ultrapassagem divertida
- Transição de página: rigidez 220, amortecimento 22, massa 1,4 – cinematográfico, ponderado
Trecho de implementação em produção
// 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>
);
}