Kort fortalt
- Easing beskriver, hvordan en bevægelses hastighed ændrer sig undervejs frem for at være konstant fra start til slut.
- Ease-out starter hurtigt og bremser, hvilket passer til elementer, der kommer ind. Ease-in starter langsomt og accelererer, hvilket passer til elementer, der forlader skærmen.
- Lineær bevægelse med konstant hastighed virker mekanisk ved enkeltbevægelser, men passer til kontinuerlige loops og rotationer.
- En cubic-bezier-kurve definerer easing med to kontrolpunkter, og værdier uden for 0 til 1 skaber bevægelse forbi målet.
- Fjedre beskriver bevægelse med fysiske indstillinger som stivhed og dæmpning, og CSS kan tilnærme dem med funktionen linear().
På denne side
Easing er den måde, en bevægelses hastighed ændrer sig på undervejs. Uden easing bevæger et objekt sig med konstant hastighed og stopper brat, hvilket virker mekanisk. Med easing accelererer og bremser det som virkelige ting: en skuffe glider hurtigt ud og falder til ro, en bold får fart på, mens den falder. Den rette easing er den hurtigste vej til at få en animation til at føles naturlig.
Sådan ser easing ud
Animatorer viser easing som et afstandsdiagram: hvor et objekt befinder sig ved lige store tidsintervaller. Når markeringerne er jævnt fordelt, er hastigheden konstant. Når de ligger tæt, bevæger objektet sig langsomt. Når der er langt mellem dem, bevæger det sig hurtigt. Her er de fire grundtyper, som hver viser elleve jævnt fordelte tidspunkter i samme bevægelse fra venstre mod højre.
De fire typer easing, du har brug for
CSS har navne på fem grundkurver, og designværktøjer bruger de samme idéer under lignende navne. Fire af dem dækker næsten alle opgaver. Den femte, ease, er browserens standard: en kurve, der starter ret hurtigt og falder blidt til ro, omtrent som en blødere ease-out.
| Easing | CSS-kurve | Brug den til |
|---|---|---|
| Ease-out | cubic-bezier(0, 0, 0.58, 1) | Elementer, der kommer ind eller bliver synlige: menuer, kort, overskrifter |
| Ease-in | cubic-bezier(0.42, 0, 1, 1) | Elementer, der forlader skærmen eller forsvinder |
| Ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) | Elementer, der flytter sig fra ét sted til et andet på skærmen |
| Lineær | cubic-bezier(0, 0, 1, 1) | Kontinuerlige loops, rotationer, statusbjælker, glidende baggrunde |
Logikken er fysisk. Noget, der ankommer, skal allerede være i bevægelse, når det bliver synligt, og så falde til ro. Derfor bruger det ease-out. Noget, der forlader skærmen, skal samle fart undervejs og bruger derfor ease-in. Lineær bevægelse er forkert til en enkelt bevægelse, men rigtig til alt kontinuerligt: et loop med easing i enderne ser ud til at tøve, hver gang det gentages, som sømløse loops forklarer.
Sådan virker cubic-bezier-kurver
Hver easingkurve i CSS tegnes mellem to faste punkter: starten (0, 0) og slutningen (1, 1). cubic-bezier() tilføjer to kontrolpunkter, som bøjer kurven. Den vandrette akse er tid, og den lodrette er fremdrift. Tidsværdierne skal ligge mellem 0 og 1, men fremdriftsværdierne kan gå ud over intervallet, så bevægelsen passerer målet og vender tilbage.
/* A stronger ease-out than the keyword: quick start, long gentle settle */
.card-enter {
transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Overshoot: the second y value above 1 carries it past, then back */
.badge-pop {
transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Exits: shorter and easing in */
.card-leave {
transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);
}MDN’s reference til easingfunktioner viser alle former, CSS accepterer, herunder steps() til bevægelse billede for billede.
Fjedre: easing ud fra fysik
En fjeder bruger ikke en fast kurve og varighed. I stedet beskriver du fysikken, typisk stivhed, som er styrken af trækket mod målet, dæmpning, som er hvor hurtigt den falder til ro, og masse. Bevægelsen følger deraf. Stive, veldæmpede fjedre føles hurtige og præcise, mens løse fjedre med let dæmpning hopper. Fjedre er populære i appgrænseflader, fordi de reagerer naturligt, når en bevægelse afbrydes halvvejs.
Mange animationsbiblioteker tilbyder fjedre direkte. I ren CSS kan funktionen linear() tilnærme en fjeder ved at angive punkter langs dens bane, hvilket moderne browsere understøtter.
/* A simple spring-like settle: past the target, back, then rest */
.sheet-open {
transition: transform 500ms
linear(0, 0.6 20%, 1.08 45%, 0.98 70%, 1);
}linear() forbinder punkterne med rette linjestykker. Flere punkter giver en glattere kurve. Generatorer kan beregne dem ud fra fjederindstillinger.Easing og varighed arbejder sammen
Den samme kurve føles forskellig ved forskellige varigheder. En ease-out over 150 millisekunder opleves som et kontant ryk. Over 800 føles den som en langsom gliden. Tilpas begge dele til afstanden og opgaven. Principper for motion design har typiske varigheder.
Almindelige fejl
- Lineær bevægelse til en menu eller et kort, der kommer ind
- Ease-in til elementer, der vises, så de starter trægt
- Samme lange varighed til små og store bevægelser
- Hoppende bevægelse forbi målet på alt
- Easing i enderne af et kontinuerligt loop
Bedre
- Ease-out til alt, der kommer ind
- Ease-in med lidt kortere varighed til alt, der forlader skærmen
- Kort tid til små bevægelser, længere til store
- Bevægelse forbi målet gemt til små, legende øjeblikke
- Lineær bevægelse til loops, så de aldrig tøver
Easing i JavaScript, designværktøjer og video
De samme kurver virker uden for CSS. I JavaScript modtager Web Animations API en CSS-easingstreng. Design- og videoværktøjer bruger de samme idéer under navne som ease in, ease out og ease in and out, typisk med en kurveeditor til egne kurver og i mange prototypeværktøjer forudindstillinger til fjedre.
const card = document.querySelector('.card')
card.animate(
[
{ transform: 'translateY(24px)', opacity: 0 },
{ transform: 'translateY(0)', opacity: 1 },
],
{ duration: 300, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', fill: 'both' },
)Uanset kurven foretrækker nogle mindre bevægelse. Respektér deres indstilling ved at forkorte eller fjerne bevægelsen. Reduceret bevægelse viser hvordan. Se animerede gradientbaggrunde for baggrunde i loop, hvor lineær bevægelse normalt er rigtig.
Spørgsmål, folk stiller
Hvad er easing i animation?
Easing er den måde, hastigheden ændrer sig på under en bevægelse. I stedet for konstant hastighed accelererer bevægelsen, bremser eller begge dele, hvilket virker mere naturligt.
Hvad er forskellen på ease-in og ease-out?
Ease-in starter langsomt og accelererer, hvilket passer til elementer, der forlader skærmen. Ease-out starter hurtigt og bremser, hvilket passer til elementer, der kommer ind.
Hvornår skal jeg bruge lineær easing?
Til kontinuerlig bevægelse som loops, rotationer, statusbjælker og langsomt glidende baggrunde. Ved enkelte bevægelser virker den mekanisk.
Hvad betyder cubic-bezier i CSS?
Den definerer en easingkurve med to kontrolpunkter mellem den faste start og slutning. Tidsværdierne holder sig mellem 0 og 1, mens fremdriftsværdier uden for intervallet skaber bevægelse forbi målet.
Hvad er fjederanimation?
Bevægelse beskrevet med fysiske indstillinger som stivhed, dæmpning og masse frem for en fast kurve. CSS kan tilnærme fjedre med easingfunktionen linear().
Skrevet af Gradiently
Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.
Se vores profil
