Skip to main content
LanguageDansk
Fysik og tokens4 min læstoktober 2026

Hvorfor er forårsanimationer bedre end cubic-bezier overgange?

Kort svar

Fjedre er bedre til interaktiv UI, fordi de kan starte fra elementets aktuelle hastighed og position, så afbrudte animationer og frigivne bevægelser fortsætter jævnt. De føles også naturlige med få indstillinger. Cubic-bezier-kurver er stadig fine og enklere til falmer, farveændringer og bevægelse, der aldrig bliver afbrudt.

Core Takeaway

  • En kubik-bezier-kurve har en fast varighed og form
  • En fjeder er defineret af stivhed, dæmpning og masse, og sætter sig, når fysikken siger det
  • Fjedre bærer hastighed, så afbrydelser og bevægelser forbliver jævne
  • Beziers er enklere og fungerer godt til udtoninger og ikke-interaktive overgange
  • Mange moderne platforme, inklusive SwiftUI, er standard til fjedre

En cubic-bezier lempelse beskriver, hvordan en værdi bevæger sig fra start til slut over en fast tid, såsom 300 millisekunder med ease-out. Den er forudsigelig og understøttet overalt, inklusive almindelig CSS.

En fjeder beskriver i stedet et fysisk system. Du indstiller stivhed, dæmpning og masse, og værdien bevæger sig mod sit mål, som en vægt på en fjeder ville, med eller uden overskridelse. Varigheden kommer fra fysikken.

Den praktiske forskel er afbrydelse. Hvis en bruger trykker igen, mens et panel åbnes, genstarter en bezier-animation normalt fra den aktuelle position med nul hastighed, hvilket ligner et problem. En fjeder starter fra den aktuelle position og hastighed, så bevægelsen bøjer jævnt mod det nye mål. Det samme gælder, når en bruger kaster et kort eller ark med en gestus: fjederen fortsætter med fingerens hastighed.

Fjedre føles også naturlige med færre beslutninger: En eller to indstillinger giver en ensartet følelse på tværs af elementer af forskellige størrelser.

Beziers har stadig en plads. For opacitet, farver og overgange, der aldrig bliver afbrudt, er en kort ease-out enklere og fungerer i CSS uden JavaScript. Mange hold bruger fjedre til bevægelse og beziers til falmer.

Ofte stillede spørgsmål

Kan CSS lave forårsanimationer?

CSS har ingen fysisk fjeder, men den lineære() easing-funktion kan tilnærme en fjederkurve i en fast varighed. Det bærer ikke hastighed mellem afbrydelser.

Hvad er gode fjederindstillinger for UI?

Start med ingen eller lidt overskridelse for de fleste brugergrænseflader og et lille hop for legende elementer. Tune efter følelse på en rigtig enhed.

Er fjedre langsommere at køre?

Ikke mærkbart i moderne biblioteker og kørselstider. Omkostningerne er for det meste i gengivelsen af ​​det, der bevæger sig, ikke forårets matematik.

Skal hver animation være et forår?

Nej. Brug fjedre til bevægelse og interaktion, og enkel lempelse til falmer og farveændringer.

Relaterede vejledninger og eksempler

Mærk forskellen i browseren

Sammenlign en fjeder og en bezier side om side, afbryd dem, og kopier de værdier, du kan lide.

Åbn fjedergeneratoren
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →