LanguageNederlands
Pijler 08 · Animatietechniek
Natuurkunde UI-animatie: de wetenschap van levende digitale interfaces
Op duur gebaseerde animaties zijn dood. Ontdek waarom Apple, Google en de beste productteams ter wereld uitsluitend bouwen met lentefysica.
What is Natuurkunde UI-animatie: in ExodeUI?
Physics UI Animation is een animatie-engineeringmethodologie die de beweging van de gebruikersinterface modelleert met behulp van natuurkundige wetten uit de echte wereld (voornamelijk harmonische veeroscillatoren van de tweede orde) in plaats van willekeurige duurtimers. Omdat fysieke veren de rustpositie dynamisch berekenen op basis van de bewegingssnelheid van de gebruiker, zijn op fysica gebaseerde interfaces 100% onderbreekbaar en voelen ze natuurlijk aan bij menselijke aanraking.
Kernarchitectuur
Waarom ingenieurs en ontwerpers kiezen voor ExodeUI
Design, logic and motion in one file that runs inside your app.
Harmonische veren van de tweede orde
Modelleer interfacebewegingen met behulp van natuurlijke fysieke vergelijkingen in plaats van willekeurige milliseconden en bezier-handvatten.
Continue snelheidsoverdracht
Fling- en sleepgebaren behouden het menselijke fysieke momentum bij releases en plotselinge omleidingen.
100% onderbreekbare interacties
Gebruikers kunnen tijdens de vlucht een animatie tikken, slepen of omleiden zonder te haperen of visueel stotteren.
Massa-, stijfheids- en dempingsregelaars
Verfijn de exacte mechanische persoonlijkheid van uw interface met intuïtieve visuele schuifregelaars en live preview.
Objectieve evaluatie
Hoe ExodeUI zich verhoudt tot Duration-Based Animation (Easing Curves)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Veren berekenen de duur automatisch op basis van afstand en snelheid
- Interacties zijn 100% onderbreekbaar zonder visuele onderbrekingen
- Behoudt het momentum van de menselijke aanraking voor een vloeiend, natuurlijk gevoel
- Komt overeen met de native animatiemodellen van iOS (CoreAnimation) en Android
Duration-Based Animation (Easing Curves)
- Timers met een vaste duur (bijvoorbeeld 300 ms) voelen onnatuurlijk aan op kleine of grote afstanden
- Het onderbreken van een animatie zorgt ervoor dat deze vastloopt of abrupt opnieuw opstart
- Negeert de snelheid van het gooien van de vingers, voelt zich traag en reageert niet
- Vereist het schrijven van complexe aangepaste JavaScript om gebarenonderbrekingen af te handelen
Ontwikkelaar Handoff
Gebruik het in uw 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>
);
}De misvatting van op duur gebaseerde animatie
Decennia lang vertrouwden web- en digitale animatie op tijdgebaseerde duurcurven: "animeer dit modale model van y: 100 naar y: 0 in 300 milliseconden met gemak." Hoewel dit werkt voor het passief afspelen van video, faalt het fundamenteel in aanraakgestuurde, interactieve software om drie wiskundige redenen:
- Afstandsvariatie: Als een vel in 300 ms 50 pixels aflegt, beweegt het langzaam. Als het in 300 ms 500 pixels aflegt, beweegt het tien keer sneller. Vaste duur creëert grillige snelheden.
- De onderbrekingsramp: als een gebruiker een element vastpakt terwijl het aan het animeren is, breekt of breekt een op duur gebaseerd systeem de natuurkundige curve.
- Snelheidsblindheid: wanneer een gebruiker een onderblad met hoge vingersnelheid naar boven gooit, negeert een duurcurve die snelheid en speelt de standaardanimatie af vanaf nulsnelheid.
De drie parameters van de lentefysica
Elke lente in ExodeUI wordt bepaald door drie eenvoudige, intuïtieve fysieke parameters:
Stijfheid (spanning)
Regelt hoe agressief de veer naar zijn beoogde rustpositie trekt. Hogere stijfheid zorgt voor snelle, pittige bewegingen.
Demping (wrijving)
Bepaalt hoeveel weerstand de beweging tegenwerkt. Ondergedempte veren oscilleren en stuiteren; kritisch gedempte veren komen tot rust zonder dat ze doorschieten.
Massa (traagheid)
Bepaalt hoe zwaar het element aanvoelt. Een hogere massa vereist meer kracht om te versnellen en meer demping om te bezinken.
Topic Cluster Network
Ontdek verbonden concepten en tools
Lente animatie speelplaatstool
Interactieve lente-sandbox en code-export
Bewegingsontwikkelingsomgeving
De MDE-platformvisie
Leren: Lente-animatie Principles
Duik diep in lentevergelijkingen
Woordenlijst: Lentefysica
Definitie, formule en parameters
Heeft u vragen?
Veelgestelde vragen
Bouw levende componenten met echte beweging.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.