LanguageDeutsch
Säule 08 · Animationstechnik
Physik-UI-Animation: Die Wissenschaft lebendiger digitaler Schnittstellen
Dauerbasierte Animationen sind tot. Erfahren Sie, warum Apple, Google und die besten Produktteams der Welt ausschließlich mit Federphysik bauen.
What is Physik-UI-Animation: Die in ExodeUI?
Physics UI Animation ist eine Animationstechnikmethode, die die Bewegung der Benutzeroberfläche anhand realer physikalischer Gesetze modelliert – hauptsächlich harmonischer Federoszillatoren zweiter Ordnung – und nicht anhand von Timern mit beliebiger Dauer. Da physikalische Federn die Ruheposition dynamisch basierend auf der Gestengeschwindigkeit des Benutzers berechnen, sind physikgesteuerte Schnittstellen zu 100 % unterbrechbar und fühlen sich bei menschlicher Berührung natürlich an.
Kernarchitektur
Warum Entwickler und Designer ExodeUI wählen
Design, logic and motion in one file that runs inside your app.
Harmonische Federn zweiter Ordnung
Modellieren Sie die Schnittstellenbewegung mithilfe natürlicher physikalischer Gleichungen anstelle willkürlicher Millisekunden und Bezier-Griffe.
Kontinuierliche Geschwindigkeitsübertragung
Schleuder- und Ziehgesten behalten den menschlichen physischen Schwung bei Loslassungen und plötzlichen Umleitungen bei.
100 % unterbrechbare Interaktionen
Benutzer können während des Flugs auf eine Animation tippen, sie ziehen oder umleiten, ohne dass sie einrastet oder visuell stottert.
Masse-, Steifigkeits- und Dämpfungskontrollen
Passen Sie den genauen mechanischen Charakter Ihrer Benutzeroberfläche mit intuitiven visuellen Schiebereglern und Live-Vorschau an.
Objektive Bewertung
Wie ExodeUI abschneidet gegen Duration-Based Animation (Easing Curves)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Federn berechnen die Dauer automatisch basierend auf Entfernung und Geschwindigkeit
- Interaktionen sind zu 100 % unterbrechbar, ohne visuelles Einrasten
- Behält den menschlichen Tastimpuls für ein flüssiges, natürliches Gefühl bei
- Entspricht den nativen Animationsmodellen von iOS (CoreAnimation) und Android
Duration-Based Animation (Easing Curves)
- Timer mit fester Dauer (z. B. 300 ms) fühlen sich auf kleinen oder großen Distanzen unnatürlich an
- Das Unterbrechen einer Animation führt dazu, dass sie abbricht oder gewaltsam neu gestartet wird
- Ignoriert die Geschwindigkeit der Fingerbewegung und fühlt sich träge und reaktionslos
- Erfordert das Schreiben eines komplexen benutzerdefinierten JavaScript, um Gestenunterbrechungen zu verarbeiten
Übergabe an die Entwicklung
So nutzt du es im 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>
);
}Der Irrtum der dauerbasierten Animation
Web- und digitale Animationen stützten sich jahrzehntelang auf zeitbasierte Dauerkurven: „Animieren Sie dieses Modal von y: 100 auf y: 0 in 300 Millisekunden mit Leichtigkeit.“ Während dies bei der passiven Videowiedergabe funktioniert, versagt es bei berührungsgesteuerter, interaktiver Software aus drei mathematischen Gründen grundsätzlich:
- Abstandsvariation: Wenn ein Blatt in 300 ms 50 Pixel zurücklegt, bewegt es sich langsam. Wenn es 500 Pixel in 300 ms zurücklegt, bewegt es sich zehnmal schneller. Feste Dauern erzeugen unregelmäßige Geschwindigkeiten.
- Die Unterbrechungskatastrophe: Wenn ein Benutzer während der Animation ein Element ergreift, rastet ein dauerbasiertes System ein oder unterbricht die Physikkurve.
- Geschwindigkeitsblindheit: Wenn ein Benutzer ein unteres Blatt mit schneller Fingergeschwindigkeit nach oben schleudert, verwirft eine Dauerkurve diese Geschwindigkeit und spielt die vorgefertigte Animation mit der Geschwindigkeit Null ab.
Die drei Parameter der Frühlingsphysik
Jede Feder in ExodeUI wird von drei einfachen, intuitiven physikalischen Parametern bestimmt:
Steifheit (Spannung)
Steuert, wie stark die Feder in ihre Zielruheposition zieht. Höhere Steifigkeit sorgt für schnelle, zügige Bewegungen.
Dämpfung (Reibung)
Steuert, wie viel Widerstand der Bewegung entgegenwirkt. Unterdämpfte Federn schwingen und springen; Kritisch gedämpfte Federn stabilisieren sich ohne Überschwingen.
Masse (Trägheit)
Steuert, wie schwer sich das Element anfühlt. Eine höhere Masse erfordert mehr Kraft zum Beschleunigen und mehr Dämpfung zum Einschwingen.
Topic Cluster Network
Verwandte Konzepte und Tools
Spielplatz-Tool für Frühlingsanimationen
Interaktive Spring-Sandbox und Code-Export
Motion-Entwicklungsumgebung
Die Vision der MDE-Plattform
Lernen: Frühlingsanimation Principles
Tauchen Sie tief in die Frühlingsgleichungen ein
Glossar: Frühlingsphysik
Definition, Formel und Parameter
Noch Fragen?
Häufige Fragen
Lebendige Komponenten mit echter Bewegung bauen.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.