Spring Animation: The Physics of Natural UI Motion
Lær hvordan våranimasjon fungerer i UI-design. Forstå stivhet, demping, masse og hastighet. Bygg naturfysikkbaserte animasjoner for React og SwiftUI.
Kjerne takeaway
Fjæranimasjon modellerer UI-bevegelse ved å bruke den fysiske oppførselen til et masse-fjær-demper-system, der en komponents bevegelse styres av stivhet (hvor sterkt den trekker mot hvile), demping (hvor raskt den mister energi) og masse (hvor mye treghet den bærer). I motsetning til varighetsbaserte animasjoner, reagerer fjærer automatisk på brukerhastighet og kan avbrytes når som helst uten å forårsake visuell diskontinuitet.
Hvorfor fjærer føles mer naturlige enn varighetskurver
Den fysiske verden har ikke begreper som "lett inn-ut" eller "kubikk-bezier(0.4, 0, 0.2, 1)." Fysiske gjenstander akselererer på grunn av krefter og bremser på grunn av friksjon. Når en skuff glir åpen, har den fart; når du slipper den, får friksjonen den til å hvile. Vårfysikk gjenskaper denne fysiske virkeligheten i programvare, og det er grunnen til at iOS UIKit, Android Motion Compose og ExodeUI alle er våren-første animasjonssystemer.
Fjærparametere forklart
Ved å forstå hver parameter kan du designe akkurat den fysiske følelsen du ønsker.
Stivhet (spenning)
Hvor sterkt fjæren trekker mot sin hvileverdi. Høy stivhet (600+) skaper rask, responsiv UI-lignende tilbakemelding på knappetrykk. Lav stivhet (100–200) skaper langsom, flytende bevegelse egnet for sideoverganger eller flytende elementer i omgivelsene.
Demping (friksjon)
Hvor mye energi taper våren per syklus. Ved kritisk demping kommer fjæren til hvile uten å oscillere. Underdempede fjærer (lav friksjon) vil skyte over og sprette. Forholdet demping / (2 × sqrt(stivhet × masse)) bestemmer om du er underdempet, kritisk dempet eller overdempet.
Masse
Hvor mye treghet det animerte elementet har. En høyere masse gjør at animasjonen føles tyngre og tar lengre tid å endre retning. De fleste UI-animasjoner holder massen på 1.0 og kontrollerer følelsen gjennom stivhet og demping.
Utgangshastighet
Hvis brukeren sveiper eller kaster et element, kan fjæren initialiseres med den bevegelseshastigheten, og skaper sømløs kontinuitet mellom bevegelse og fjæroppgjør.
Praktiske fjærforhåndsinnstillinger for UI-komponenter
Disse forhåndsinnstillingene dekker de vanligste UI-interaksjonsmønstrene.
- Knappetrykk: stivhet 500, demping 30 — øyeblikkelig, rask, minimal sprett
- Kortekspansjon: stivhet 280, demping 24, masse 1,2 — jevn, vektet ekspansjon
- Skuff/ark: stivhet 340, demping 28 — avgjørende, med lett setning
- Hoppevarsling: stivhet 400, demping 18 — leken oversving
- Sideovergang: stivhet 220, demping 22, masse 1,4 — filmisk, vektet
Snippet for produksjonsimplementering
// Spring presets in React with the Motion library (motion.dev).
// The same stiffness / damping / mass values can be saved as motion tokens.
import { motion } from 'motion/react';
const springs = {
snappy: { type: 'spring', stiffness: 500, damping: 30, mass: 1 },
smooth: { type: 'spring', stiffness: 280, damping: 24, mass: 1.2 },
bouncy: { type: 'spring', stiffness: 400, damping: 18, mass: 1 },
cinematic: { type: 'spring', stiffness: 220, damping: 22, mass: 1.4 },
};
export function PhysicsCard({ open }) {
return (
<motion.div
animate={{ y: open ? 0 : 24, scale: open ? 1 : 0.96 }}
transition={springs.smooth}
>
Smooth physics-based card reveal
</motion.div>
);
}