LanguageEspañol
Pilar 08 · Ingeniería de Animación
Animación de interfaz de usuario de física: la ciencia de las interfaces digitales vivas
Las animaciones basadas en la duración están muertas. Descubra por qué Apple, Google y los mejores equipos de productos del mundo construyen exclusivamente con física de primavera.
What is Animación de in ExodeUI?
Physics UI Animation es una metodología de ingeniería de animación que modela el movimiento de la interfaz de usuario utilizando leyes físicas del mundo real (principalmente osciladores de resorte armónicos de segundo orden) en lugar de temporizadores de duración arbitrarios. Debido a que los resortes físicos calculan dinámicamente la posición de descanso en función de la velocidad de los gestos del usuario, las interfaces basadas en la física son 100% interrumpibles y se sienten naturales al tacto humano.
Arquitectura central
Por qué ingenieros y diseñadores eligen ExodeUI
Design, logic and motion in one file that runs inside your app.
Resortes armónicos de segundo orden
Modele el movimiento de la interfaz utilizando ecuaciones físicas naturales en lugar de milisegundos arbitrarios y controles Bézier.
Transferencia de velocidad continua
Los gestos de arrojar y arrastrar retienen el impulso físico humano a través de liberaciones y redirecciones repentinas.
Interacciones 100% interrumpibles
Los usuarios pueden tocar, arrastrar o redirigir una animación en pleno vuelo sin que se rompa ni se tartamudee visualmente.
Controles de masa, rigidez y amortiguación
Ajuste la personalidad mecánica exacta de su interfaz con controles deslizantes visuales intuitivos y vista previa en vivo.
Evaluación objetiva
Cómo se compara ExodeUI con Duration-Based Animation (Easing Curves)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Los resortes calculan la duración automáticamente según la distancia y la velocidad.
- Las interacciones son 100% interrumpibles sin cortes visuales.
- Preserva el impulso del tacto humano para una sensación nativa fluida
- Coincide con los modelos de animación nativos de iOS (CoreAnimation) y Android.
Duration-Based Animation (Easing Curves)
- Los temporizadores de duración fija (por ejemplo, 300 ms) no parecen naturales en distancias pequeñas o grandes
- Interrumpir una animación hace que se rompa o se reinicie violentamente.
- Ignora la velocidad de lanzamiento de los dedos, sintiéndose lento y sin respuesta.
- Requiere escribir JavaScript personalizado complejo para manejar las interrupciones de gestos
Entrega al desarrollo
Cómo usarlo en tu 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>
);
}La falacia de la animación basada en la duración
Durante décadas, la animación web y digital se basó en curvas de duración basadas en el tiempo: "animar este modal de y: 100 a y: 0 en 300 milisegundos con facilidad". Si bien esto funciona para la reproducción pasiva de video, falla fundamentalmente en el software interactivo táctil por tres razones matemáticas:
- Variación de distancia: si una hoja recorre 50 píxeles en 300 ms, se mueve lentamente. Si recorre 500 píxeles en 300 ms, se mueve diez veces más rápido. Las duraciones fijas crean velocidades erráticas.
- El desastre de la interrupción: si un usuario agarra un elemento mientras se está animando, un sistema basado en la duración rompe o rompe la curva física.
- Ceguera de velocidad: cuando un usuario lanza una sábana bajera hacia arriba con una rápida velocidad de los dedos, una curva de duración descarta esa velocidad y reproduce su animación predeterminada desde velocidad cero.
Los tres parámetros de la física primaveral
Cada resorte en ExodeUI se rige por tres parámetros físicos simples e intuitivos:
Rigidez (tensión)
Controla la agresividad con la que el resorte tira hacia su posición de reposo objetivo. Una mayor rigidez crea un movimiento rápido y ágil.
Amortiguación (fricción)
Controla cuánta resistencia se opone al movimiento. Los resortes poco amortiguados oscilan y rebotan; Los resortes críticamente amortiguados se asientan sin sobrepaso.
Masa (Inercia)
Controla qué tan pesado se siente el elemento. Una masa mayor requiere más fuerza para acelerar y más amortiguación para asentarse.
Topic Cluster Network
Explora conceptos y herramientas relacionadas
Herramienta de animación de primavera
Exportación de código y sandbox de primavera interactivo
Entorno de desarrollo de movimiento
La visión de la plataforma MDE
Más información: Animación de primavera Principle
Profundización en las ecuaciones de primavera
Glosario: Física de primavera
Definición, fórmula y parámetros.
¿Tienes preguntas?
Preguntas frecuentes
Crea componentes vivos con movimiento real.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.