LanguageFrançais
Pilier 08 · Ingénierie de l'animation
Animation de l'interface utilisateur physique : la science des interfaces numériques vivantes
Les animations basées sur la durée sont mortes. Découvrez pourquoi Apple, Google et les meilleures équipes produit au monde construisent exclusivement avec la physique du printemps.
What is Animation de in ExodeUI?
Physics UI Animation est une méthodologie d'ingénierie d'animation qui modélise le mouvement de l'interface utilisateur à l'aide de lois physiques du monde réel (principalement des oscillateurs à ressort harmoniques de second ordre) plutôt que de minuteries de durée arbitraires. Étant donné que les ressorts physiques calculent la position de repos de manière dynamique en fonction de la vitesse des gestes de l'utilisateur, les interfaces basées sur la physique sont 100 % disruptibles et semblent naturelles au toucher humain.
Architecture centrale
Pourquoi les ingénieurs et les designers choisissent ExodeUI
Design, logic and motion in one file that runs inside your app.
Ressorts harmoniques du second ordre
Modélisez le mouvement de l'interface à l'aide d'équations physiques naturelles plutôt que de millisecondes arbitraires et de poignées de Bézier.
Transfert de vitesse continu
Les gestes de lancer et de glisser conservent l'élan physique humain lors des versions et des redirections soudaines.
Interactions 100% Interruptibles
Les utilisateurs peuvent appuyer, faire glisser ou rediriger une animation en cours de vol sans accrochage ni bégaiement visuel.
Contrôles de masse, de rigidité et d'amortissement
Affinez la personnalité mécanique exacte de votre interface avec des curseurs visuels intuitifs et un aperçu en direct.
Évaluation objective
Comment ExodeUI se compare à Duration-Based Animation (Easing Curves)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Les ressorts calculent automatiquement la durée en fonction de la distance et de la vitesse
- Les interactions sont 100 % disruptibles, sans accrochage visuel
- Préserve l’élan du toucher humain pour une sensation native fluide
- Correspond aux modèles d'animation natifs d'iOS (CoreAnimation) et d'Android
Duration-Based Animation (Easing Curves)
- Les minuteries à durée fixe (par exemple 300 ms) ne semblent pas naturelles sur de petites ou grandes distances
- Interrompre une animation provoque son claquement ou son redémarrage violent
- Ignore la vitesse de projection des doigts, se sentant lent et insensible
- Nécessite l'écriture de JavaScript personnalisés complexes pour gérer les interruptions gestuelles
Passage au développement
L’utiliser dans votre code
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>
);
}L’erreur de l’animation basée sur la durée
Pendant des décennies, l'animation Web et numérique s'est appuyée sur des courbes de durée basées sur le temps : « animez ce modal de y : 100 à y : 0 en 300 millisecondes en toute simplicité ». Bien que cela fonctionne pour la lecture vidéo passive, cela échoue fondamentalement dans les logiciels interactifs tactiles pour trois raisons mathématiques :
- Variation de distance : si une feuille parcourt 50 pixels en 300 ms, elle se déplace lentement. S'il parcourt 500 pixels en 300 ms, il se déplace dix fois plus vite. Les durées fixes créent des vitesses erratiques.
- Le désastre de l'interruption : si un utilisateur saisit un élément pendant son animation, un système basé sur la durée brise ou brise la courbe physique.
- Cécité de la vitesse : lorsqu'un utilisateur lance une feuille inférieure vers le haut avec une vitesse rapide du doigt, une courbe de durée supprime cette vitesse et lit son animation prédéfinie à partir d'une vitesse nulle.
Les trois paramètres de la physique des ressorts
Chaque ressort de ExodeUI est régi par trois paramètres physiques simples et intuitifs :
Rigidité (Tension)
Contrôle l'agressivité avec laquelle le ressort tire vers sa position de repos cible. Une rigidité plus élevée crée un mouvement rapide et vif.
Amortissement (Friction)
Contrôle le degré de résistance qui s'oppose au mouvement. Les ressorts sous-amortis oscillent et rebondissent ; les ressorts à amortissement critique se stabilisent sans dépassement nul.
Masse (Inertie)
Contrôle le poids de l'élément. Une masse plus élevée nécessite plus de force pour accélérer et plus d'amortissement pour s'installer.
Topic Cluster Network
Explorer les concepts et outils liés
Outil de terrain de jeu d'animation de printemps
Bac à sable interactif Spring et exportation de code
Environnement de développement de mouvement
La vision de la plateforme MDE
Apprendre : Animation de printemps Principles
Plongée dans les équations de ressort
Glossaire : Physique du printemps
Définition, formule et paramètres
Des questions ?
Questions fréquentes
Créez des composants vivants avec un vrai mouvement.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.