Spring Animation: The Physics of Natural UI Motion
Lær, hvordan forårsanimation fungerer i UI-design. Forstå stivhed, dæmpning, masse og hastighed. Byg naturlige fysik-baserede animationer til React og SwiftUI.
Core Takeaway
Fjederanimation modellerer UI-bevægelse ved hjælp af den fysiske opførsel af et masse-fjeder-dæmper-system, hvor en komponents bevægelse er styret af stivhed (hvor kraftigt den trækker mod hvile), dæmpning (hvor hurtigt den taber energi) og masse (hvor meget inerti den bærer). I modsætning til varighedsbaserede animationer reagerer fjedre automatisk på brugerens hastighed og kan afbrydes på ethvert tidspunkt uden at forårsage visuel diskontinuitet.
Hvorfor fjedre føles mere naturlige end varighedskurver
Den fysiske verden har ikke begreber som "ease-in-out" eller "cubic-bezier(0.4, 0, 0.2, 1)." Fysiske genstande accelererer på grund af kræfter og decelererer på grund af friktion. Når en skuffe glider åben, har den fart; når du slipper den, bringer friktion den til hvile. Spring physics replikerer denne fysiske virkelighed i software, og derfor er iOS UIKit, Android Motion Compose og ExodeUI alle foråret-første animationssystemer.
Fjederparametre forklaret
Ved at forstå hver parameter kan du designe præcis den fysiske følelse, du ønsker.
Stivhed (spænding)
Hvor kraftigt fjederen trækker mod sin hvileværdi. Høj stivhed (600+) skaber hurtig, responsiv UI-lignende knaptryksfeedback. Lav stivhed (100–200) skaber langsom, flydende bevægelse, der er velegnet til sideovergange eller omgivende flydende elementer.
Dæmpning (friktion)
Hvor meget energi taber fjederen pr. cyklus. Ved kritisk dæmpning når fjederen hvile uden at oscillere. Underdæmpede fjedre (lav friktion) vil overskride og hoppe. Forholdet dæmpning / (2 × sqrt(stivhed × masse)) bestemmer, om du er underdæmpet, kritisk dæmpet eller overdæmpet.
Masse
Hvor meget inerti det animerede element bærer. En højere masse får animationen til at føles tungere og tager længere tid at skifte retning. De fleste UI-animationer holder massen på 1,0 og kontrollerer følelsen gennem stivhed og dæmpning.
Starthastighed
Hvis brugeren stryger eller kaster et element, kan fjederen initialiseres med den gestushastighed, hvilket skaber problemfri kontinuitet mellem gestus og fjederafvikling.
Praktiske fjederforudindstillinger til UI-komponenter
Disse forudindstillinger dækker de mest almindelige UI-interaktionsmønstre.
- Knaphane: stivhed 500, dæmpning 30 — øjeblikkelig, hurtig, minimalt afvisning
- Kortudvidelse: stivhed 280, dæmpning 24, masse 1,2 — jævn, vægtet ekspansion
- Skuffe / plade: stivhed 340, dæmpning 28 — afgørende, med let sætning
- Bouncy-meddelelse: stivhed 400, dæmpning 18 — legende overskridelse
- Sideovergang: stivhed 220, dæmpning 22, masse 1,4 — filmisk, vægtet
Snippet til produktionsimplementering
// 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>
);
}