Cluster Framer Motion8 minutos de leitura·Pela equipe ExodeUI
Dominando a Física da Primavera em Framer Motion e ExodeUI
Guia completo para física da primavera em Framer Motion. Domine rigidez, amortecimento, massa e restDelta e descubra a autoria visual com ExodeUI.
Resumo direto e definição
Ponto principal
A física da primavera no Framer Motion substitui curvas de atenuação baseadas no tempo por simulação física. Governadas pela rigidez (tensão), amortecimento (fricção) e massa, as molas calculam automaticamente a duração com base na distância e na velocidade de entrada, garantindo que as interações nunca pareçam abruptas ou lentas.
Os três parâmetros das molas Framer Motion
Em Framer Motion, transição: { type: "spring" } leva três parâmetros físicos primários:
- rigidez: valores mais altos (por exemplo, 500) atingem o alvo rapidamente; valores mais baixos (por exemplo, 150) deslizam suavemente.
- amortecimento: Controla o rebote. O amortecimento abaixo de 20 causa saltos perceptíveis; o amortecimento em torno de 28 cria um assentamento limpo e profissional.
- massa: Multiplica o momento e a distância de desaceleração. O padrão é 1,0.
Trecho de implementação em produção
Implementação do componente interativo
// 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>
);