Spring Animation: The Physics of Natural UI Motion
Lär dig hur våranimering fungerar i UI-design. Förstå styvhet, dämpning, massa och hastighet. Bygg naturliga fysikbaserade animationer för React och SwiftUI.
Core Takeaway
Fjäderanimation modellerar UI-rörelse med hjälp av det fysiska beteendet hos ett mass-fjäder-dämparsystem, där en komponents rörelse styrs av styvhet (hur starkt den drar mot vila), dämpning (hur snabbt den förlorar energi) och massa (hur mycket tröghet den bär). Till skillnad från varaktighetsbaserade animationer reagerar fjädrar automatiskt på användarhastighet och kan avbrytas när som helst utan att orsaka visuell diskontinuitet.
Varför fjädrar känns mer naturliga än varaktighetskurvor
Den fysiska världen har inte begrepp som "ease-in-out" eller "cubic-bezier(0.4, 0, 0.2, 1)." Fysiska föremål accelererar på grund av krafter och bromsar på grund av friktion. När en låda skjuts upp har den fart; när du släpper den får den friktion att vila. Spring physics replikerar denna fysiska verklighet i mjukvara, vilket är anledningen till att iOS UIKit, Android Motion Compose och ExodeUI alla är våren-första animationssystem.
Fjäderparametrar förklaras
Genom att förstå varje parameter kan du designa exakt den fysiska känsla du vill ha.
Stelhet (spänning)
Hur starkt fjädern drar mot sitt vilovärde. Hög styvhet (600+) skapar snabb, responsiv UI-liknande knapptrycksfeedback. Låg styvhet (100–200) skapar långsamma, flytande rörelser som är lämpliga för sidövergångar eller omgivande flytande element.
Dämpning (friktion)
Hur mycket energi tappar fjädern per cykel. Vid kritisk dämpning når fjädern vila utan att svänga. Underdämpade fjädrar (låg friktion) kommer att skjuta över och studsa. Förhållandet dämpning / (2 × sqrt(styvhet × massa)) avgör om du är underdämpad, kritiskt dämpad eller överdämpad.
Massa
Hur mycket tröghet det animerade elementet bär. En högre massa gör att animeringen känns tyngre och tar längre tid att ändra riktning. De flesta UI-animationer håller massan på 1.0 och kontrollerar känslan genom styvhet och dämpning.
Initial hastighet
Om användaren sveper eller kastar ett element kan fjädern initieras med den gesthastigheten, vilket skapar en sömlös kontinuitet mellan gest och fjäderavveckling.
Praktiska fjäderförinställningar för UI-komponenter
Dessa förinställningar täcker de vanligaste interaktionsmönstren för användargränssnittet.
- Knapptryckning: styvhet 500, dämpning 30 — omedelbar, snabb, minimal studs
- Kortexpansion: styvhet 280, dämpning 24, massa 1,2 — jämn, viktad expansion
- Låda/plåt: styvhet 340, dämpning 28 — avgörande, med lätt sättning
- Bouncy-meddelande: styvhet 400, dämpning 18 — lekfull överskjutning
- Sidövergång: styvhet 220, dämpning 22, massa 1,4 — filmisk, viktad
Produktionsimplementeringsutdrag
// 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>
);
}