Lente-animatie: de fysica van natuurlijke UI-beweging
Ontdek hoe lenteanimatie werkt in UI-ontwerp. Begrijp stijfheid, demping, massa en snelheid. Bouw op natuurlijke fysica gebaseerde animaties voor React en SwiftUI.
Kern afhaalmaaltijd
Lente-animatie modelleert UI-beweging met behulp van het fysieke gedrag van een massa-veer-dempersysteem, waarbij de beweging van een component wordt bepaald door stijfheid (hoe sterk het naar rust trekt), demping (hoe snel het energie verliest) en massa (hoeveel traagheid het draagt). In tegenstelling tot op duur gebaseerde animaties reageren veren automatisch op de snelheid van de gebruiker en kunnen ze op elk moment worden onderbroken zonder visuele discontinuïteit te veroorzaken.
Waarom veren natuurlijker aanvoelen dan duurcurven
De fysieke wereld kent geen concepten als ‘ease-in-out’ of ‘cubic-bezier(0,4, 0, 0,2, 1)’. Fysieke objecten versnellen door krachten en vertragen door wrijving. Wanneer een lade openschuift, heeft deze momentum; wanneer je het loslaat, brengt wrijving het tot rust. De natuurkunde van de lente repliceert deze fysieke realiteit in software, en daarom zijn iOS UIKit, Android Motion Compose en ExodeUI allemaal lente-eerste animatiesystemen.
Lenteparameters uitgelegd
Als u elke parameter begrijpt, kunt u precies het fysieke gevoel ontwerpen dat u wilt.
Stijfheid (spanning)
Hoe sterk de veer naar zijn rustwaarde trekt. Hoge stijfheid (600+) zorgt voor een pittige, responsieve gebruikersinterface zoals feedback over het indrukken van knoppen. Lage stijfheid (100–200) zorgt voor een langzame, zwevende beweging die geschikt is voor pagina-overgangen of zwevende elementen in de omgeving.
Demping (wrijving)
Hoeveel energie verliest de veer per cyclus. Bij kritische demping bereikt de veer rust zonder te oscilleren. Ondergedempte veren (lage wrijving) zullen doorschieten en stuiteren. De verhouding demping / (2 × sqrt(stijfheid × massa)) bepaalt of u ondergedempt, kritisch gedempt of overgedempt bent.
Massa
Hoeveel traagheid het geanimeerde element draagt. Een hogere massa zorgt ervoor dat de animatie zwaarder aanvoelt en dat het langer duurt om van richting te veranderen. De meeste UI-animaties houden de massa op 1,0 en controleren het gevoel door middel van stijfheid en demping.
Initiële snelheid
Als de gebruiker een element veegt of gooit, kan de veer met die bewegingssnelheid worden geïnitialiseerd, waardoor een naadloze continuïteit tussen gebaar en veerzetting ontstaat.
Praktische veervoorinstellingen voor UI-componenten
Deze voorinstellingen omvatten de meest voorkomende UI-interactiepatronen.
- Knoptap: stijfheid 500, demping 30 - direct, pittig, minimale veerkracht
- Kaartuitbreiding: stijfheid 280, demping 24, massa 1,2 - soepele, gewogen uitzetting
- Lade/blad: stijfheid 340, demping 28 — doorslaggevend, met lichte zetting
- Bouncy-melding: stijfheid 400, demping 18 – speelse overshoot
- Paginaovergang: stijfheid 220, demping 22, massa 1.4 — filmisch, gewogen
Productie-implementatiefragment
// 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>
);
}