LanguagePortuguês (BR)
Pilar 08 · Engenharia de Animação
Animação de UI de Física: A Ciência das Interfaces Digitais Vivas
As animações baseadas em duração estão mortas. Saiba por que a Apple, o Google e as melhores equipes de produtos do mundo constroem exclusivamente com a física da primavera.
What is Animação de in ExodeUI?
Physics UI Animation é uma metodologia de engenharia de animação que modela o movimento da interface do usuário usando leis físicas do mundo real - principalmente osciladores de mola harmônicos de segunda ordem - em vez de temporizadores de duração arbitrários. Como as molas físicas calculam a posição de repouso dinamicamente com base na velocidade do gesto do usuário, as interfaces baseadas na física são 100% interrompíveis e parecem naturais ao toque humano.
Arquitetura central
Por que engenheiros e designers escolhem o ExodeUI
Design, logic and motion in one file that runs inside your app.
Molas Harmônicas de Segunda Ordem
Modele o movimento da interface usando equações físicas naturais em vez de milissegundos arbitrários e identificadores de Bézier.
Transferência Contínua de Velocidade
Os gestos de arremessar e arrastar retêm o impulso físico humano durante liberações e redirecionamentos repentinos.
Interações 100% interrompíveis
Os usuários podem tocar, arrastar ou redirecionar uma animação durante o voo, sem ajustes ou interrupções visuais.
Controles de massa, rigidez e amortecimento
Ajuste a personalidade mecânica exata da sua interface com controles deslizantes visuais intuitivos e visualização ao vivo.
Avaliação objetiva
Como o ExodeUI se compara a Duration-Based Animation (Easing Curves)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- As molas calculam a duração automaticamente com base na distância e velocidade
- As interações são 100% interrompíveis, sem ajustes visuais
- Preserva o impulso do toque humano para uma sensação nativa fluida
- Corresponde aos modelos de animação nativos do iOS (CoreAnimation) e Android
Duration-Based Animation (Easing Curves)
- Temporizadores de duração fixa (por exemplo, 300 ms) não parecem naturais em distâncias pequenas ou grandes
- Interromper uma animação faz com que ela se quebre ou reinicie violentamente
- Ignora a velocidade de arremesso dos dedos, sentindo-se lento e sem resposta
- Requer escrever JavaScript personalizado complexo para lidar com interrupções de gestos
Entrega para o desenvolvimento
Como usar no seu código
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
// A physics-driven expand in React with the Motion library (motion.dev).
// Mass, stiffness and damping replace a fixed duration, and an interrupted
// animation continues from its current velocity.
import { motion } from 'motion/react';
export function PhysicsCard({ open }) {
return (
<motion.div
animate={{ height: open ? 240 : 64, opacity: open ? 1 : 0.7 }}
transition={{ type: 'spring', stiffness: 380, damping: 26, mass: 1 }}
style={{ overflow: 'hidden' }}
>
<h3>Physics-driven element</h3>
<p>Settles naturally, with no hard-coded duration</p>
</motion.div>
);
}A falácia da animação baseada na duração
Durante décadas, a animação digital e da web dependeu de curvas de duração baseadas no tempo: "anime este modal de y: 100 a y: 0 em 300 milissegundos com facilidade." Embora isso funcione para reprodução passiva de vídeo, falha fundamentalmente em software interativo acionado por toque por três razões matemáticas:
- Variação de distância: se uma folha percorrer 50 pixels em 300ms, ela se moverá lentamente. Se percorrer 500 pixels em 300 ms, ele se moverá dez vezes mais rápido. Durações fixas criam velocidades erráticas.
- O desastre da interrupção: se um usuário agarra um elemento enquanto ele está animando, um sistema baseado em duração quebra ou quebra a curva física.
- Cegueira de velocidade: quando um usuário arremessa uma folha de baixo para cima com a velocidade rápida do dedo, uma curva de duração descarta essa velocidade e reproduz sua animação enlatada a partir da velocidade zero.
Os três parâmetros da física da primavera
Cada primavera no ExodeUI é governada por três parâmetros físicos simples e intuitivos:
Rigidez (tensão)
Controla a agressividade com que a mola é puxada em direção à sua posição de repouso alvo. Maior rigidez cria movimentos rápidos e rápidos.
Amortecimento (fricção)
Controla quanta resistência se opõe ao movimento. As molas subamortecidas oscilam e saltam; molas criticamente amortecidas assentam com ultrapassagem zero.
Massa (Inércia)
Controla o quão pesado o elemento parece. Uma massa maior requer mais força para acelerar e mais amortecimento para assentar.
Topic Cluster Network
Explore conceitos e ferramentas relacionados
Ferramenta Playground de Animação de Primavera
Sandbox interativo de primavera e exportação de código
Ambiente de desenvolvimento de movimento
A visão da plataforma MDE
Aprenda: Animação Spring Principles
Mergulhe profundamente nas equações da primavera
Glossário: Física da Primavera
Definição, fórmula e parâmetros
Ficou com dúvidas?
Perguntas frequentes
Crie componentes vivos com movimento real.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.