LanguageSvenska
Pelare 08 · Animationsteknik
Physics UI Animation: The Science of Living Digital Interfaces
Varaktighetsbaserade animationer är döda. Lär dig varför Apple, Google och de bästa produktteamen i världen bygger exklusivt med vårfysik.
What is Physics UI in ExodeUI?
Physics UI Animation är en animationsteknikmetod som modellerar användargränssnittets rörelser med hjälp av verkliga fysiska lagar – främst andra ordningens harmoniska fjäderoscillatorer – snarare än godtyckliga varaktighetstimer. Eftersom fysiska fjädrar beräknar vilopositionen dynamiskt baserat på användarens gesthastighet, är fysikdrivna gränssnitt 100 % avbrottsbara och känns naturliga för mänsklig beröring.
Kärnarkitektur
Varför ingenjörer och designers väljer ExodeUI
Design, logic and motion in one file that runs inside your app.
Andra ordningens harmoniska fjädrar
Modellera gränssnittsrörelse med naturliga fysiska ekvationer snarare än godtyckliga millisekunder och bezier-handtag.
Kontinuerlig hastighetsöverföring
Släng- och draggester behåller mänsklig fysisk fart över släpp och plötsliga omdirigeringar.
100 % avbrottsbara interaktioner
Användare kan trycka, dra eller omdirigera en animation mitt under flygningen utan att knäppa eller visuellt stamma.
Kontroller för massa, styvhet och dämpning
Finjustera den exakta mekaniska personligheten i ditt gränssnitt med intuitiva visuella reglage och liveförhandsvisning.
Objektiv utvärdering
Hur ExodeUI jämförs med Duration-Based Animation (Easing Curves)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Fjädrar beräknar varaktigheten automatiskt baserat på avstånd och hastighet
- Interaktioner är 100 % avbrottsbara utan visuella avbrott
- Bevarar mänsklig beröringsmomentum för flytande inhemsk känsla
- Matchar de inbyggda animationsmodellerna för iOS (CoreAnimation) och Android
Duration-Based Animation (Easing Curves)
- Timrar med fast varaktighet (t.ex. 300 ms) känns onaturliga på små eller stora avstånd
- Att avbryta en animering gör att den knäpps eller startas om med våld
- Ignorerar fingerslungningshastigheten, känner sig trög och inte svarar
- Kräver att du skriver komplexa anpassade JavaScript för att hantera gestavbrott
Utvecklare Handoff
Använder den i din kod
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>
);
}The Missacy of Duration-Based Animation
I decennier har webb- och digitalanimering förlitat sig på tidsbaserade varaktighetskurvor: "animera denna modal från y: 100 till y: 0 på 300 millisekunder med lätthet." Även om detta fungerar för passiv videouppspelning, misslyckas det i grunden i beröringsdriven, interaktiv programvara av tre matematiska skäl:
- Avståndsvariation: Om ett ark färdas 50 pixlar på 300 ms, rör sig det långsamt. Om den färdas 500 pixlar på 300 ms, rör den sig tio gånger snabbare. Fasta varaktigheter skapar oregelbundna hastigheter.
- Avbrottskatastrofen: Om en användare tar tag i ett element medan det animerar, knäpper eller bryter ett varaktighetsbaserat system fysikkurvan.
- Hastighetsblindhet: När en användare slänger ett bottenark uppåt med snabb fingerhastighet, kasserar en varaktighetskurva den hastigheten och spelar upp dess konserverade animation från noll hastighet.
Vårfysikens tre parametrar
Varje fjäder i ExodeUI styrs av tre enkla, intuitiva fysiska parametrar:
Stelhet (spänning)
Styr hur aggressivt fjädern drar mot sitt målviloläge. Högre styvhet skapar snabba, snabba rörelser.
Dämpning (friktion)
Styr hur mycket motstånd som motverkar rörelsen. Underdämpade fjädrar oscillerar och studsar; kritiskt dämpade fjädrar sätter sig med noll översvängning.
Massa (tröghet)
Styr hur tungt elementet känns. Högre massa kräver mer kraft för att accelerera och mer dämpning för att sätta sig.
Topic Cluster Network
Utforska anslutna koncept och verktyg
Har du frågor?
Vanliga frågor
Bygg levande komponenter med verklig rörelse.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.