Kortversjonen
- Easing beskriver hvordan farten i en bevegelse endrer seg underveis, i stedet for å være konstant fra start til slutt.
- Ease-out starter raskt og bremser ned, noe som passer ting som kommer inn; ease-in starter langsomt og øker farten, noe som passer ting som forsvinner.
- Lineær bevegelse med konstant fart virker mekanisk ved enkeltbevegelser, men er riktig for kontinuerlige løkker og rotasjoner.
- En cubic-bezier-kurve definerer easing med to kontrollpunkter, og verdier utenfor 0 til 1 gir bevegelse forbi målet.
- Fjærer beskriver bevegelse med fysiske innstillinger som stivhet og demping, og CSS kan etterligne dem med funksjonen linear().
På denne siden
Easing er hvordan farten i en bevegelse endrer seg underveis. Uten easing beveger et objekt seg med konstant fart og bråstopper, noe som virker mekanisk. Med easing øker og senker det farten slik virkelige ting gjør: en skuff glir raskt ut og faller til ro, en ball øker farten mens den faller. Riktig easing er den raskeste måten å få en animasjon til å føles naturlig på.
Slik ser easing ut
Animatører tegner easing som et avstandsdiagram: hvor et objekt befinner seg ved like tidsintervaller. Når merkene har jevn avstand, er farten konstant. Når de samler seg, beveger objektet seg langsomt; når de sprer seg, beveger det seg raskt. Her er de fire grunnvariantene, hver med elleve jevnt fordelte tidspunkter i samme bevegelse fra venstre mot høyre.
De fire easing-variantene du faktisk trenger
CSS har navn på fem grunnkurver, og designverktøy bruker de samme ideene med lignende navn. Fire dekker nesten alle oppgaver. Den femte, ease, er nettleserens standard: en kurve som starter nokså raskt og roer seg mykt, omtrent som en mildere ease-out.
| Easing | CSS-kurve | Bruk til |
|---|---|---|
| Ease-out | cubic-bezier(0, 0, 0.58, 1) | Ting som kommer inn eller vises: menyer, kort, overskrifter |
| Ease-in | cubic-bezier(0.42, 0, 1, 1) | Ting som går ut eller forsvinner |
| Ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) | Ting som flytter seg fra ett sted til et annet på skjermen |
| Lineær | cubic-bezier(0, 0, 1, 1) | Kontinuerlige løkker, rotasjoner, fremdriftslinjer, drivende bakgrunner |
Logikken er fysisk. Noe som kommer inn, bør allerede være i bevegelse når det vises, og så roe seg, derfor ease-out. Noe som forsvinner, bør øke farten på vei ut, derfor ease-in. Lineær bevegelse er feil for en enkelt bevegelse, men riktig for noe kontinuerlig: en løkke som senker farten i endene, ser ut til å nøle hver gang den gjentas, slik sømløse løkker forklarer.
Slik fungerer cubic-bezier-kurver
Hver easing-kurve i CSS tegnes mellom to faste punkter, starten (0, 0) og slutten (1, 1). En cubic-bezier() legger til to kontrollpunkter som bøyer kurven. Den vannrette aksen er tid, og den loddrette er fremdrift. Tidsverdiene må ligge mellom 0 og 1, men fremdriftsverdiene kan gå utenfor, slik at bevegelsen passerer målet og kommer tilbake.
/* 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);
}MDNs referanse til easing-funksjoner viser alle formene CSS godtar, inkludert steps() for bevegelse bilde for bilde.
Fjærer: easing fra fysikken
En fjær bruker ikke en fast kurve og varighet. Du beskriver fysikken i stedet, vanligvis stivhet (hvor sterkt den trekker mot målet), demping (hvor raskt den roer seg) og masse, og bevegelsen følger derfra. Stive, godt dempede fjærer virker raske og presise; løse, svakt dempede fjærer spretter. Fjærer er populære i appgrensesnitt fordi de reagerer naturlig når en bevegelse avbrytes halvveis.
Mange animasjonsbiblioteker tilbyr fjærer direkte. I ren CSS kan funksjonen linear() etterligne en ved å liste opp punkter langs banen, noe moderne nettlesere stø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 punktene med rette segmenter. Flere punkter gir en jevnere kurve; generatorer kan beregne dem fra fjærinnstillinger.Easing og varighet virker sammen
Samme kurve føles ulik med ulik varighet. En ease-out over 150 millisekunder virker som et raskt rykk; over 800 virker den som en langsom glidning. Tilpass begge til avstanden og oppgaven. Prinsipper for bevegelsesdesign viser typiske varigheter.
Vanlige feil
- Lineær bevegelse når en meny eller et kort kommer inn
- Ease-in på ting som vises, slik at de starter tregt
- Den samme lange varigheten for små og store bevegelser
- Sprett forbi målet på alt
- Easing i endene av en kontinuerlig løkke
Bedre
- Ease-out for alt som kommer inn
- Ease-in med litt kortere varighet for alt som går ut
- Kort for små bevegelser, lengre for større
- Bevegelse forbi målet spart til små, lekne øyeblikk
- Lineær bevegelse for løkker, så de aldri nøler
Easing i JavaScript, designverktøy og video
De samme kurvene fungerer utenfor CSS. I JavaScript tar Web Animations API imot en CSS-easingstreng. Design- og videoverktøy bruker de samme ideene under navn som ease in, ease out og ease in and out, vanligvis med en grafeditor for egne kurver og, i mange prototypeverktøy, forhåndsinnstilte fjærer.
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' },
)Uansett kurve foretrekker noen mindre bevegelse. Respekter innstillingen deres ved å forkorte eller fjerne bevegelse; redusert bevegelse viser hvordan. For løkkebakgrunner, der lineær bevegelse vanligvis er riktig, se animerte gradientbakgrunner.
Spørsmål folk stiller
Hva er easing i animasjon?
Easing er måten farten i en bevegelse endres underveis. I stedet for konstant fart øker eller senker bevegelsen farten, eller begge deler, noe som ser mer naturlig ut.
Hva er forskjellen mellom ease-in og ease-out?
Ease-in starter langsomt og øker farten, noe som passer ting som går ut. Ease-out starter raskt og bremser ned, noe som passer ting som kommer inn.
Når bør jeg bruke lineær easing?
Til kontinuerlig bevegelse som løkker, rotasjoner, fremdriftslinjer og langsomt drivende bakgrunner. Ved enkeltbevegelser virker det mekanisk.
Hva betyr cubic-bezier i CSS?
Det definerer en easing-kurve med to kontrollpunkter mellom fast start og slutt. Tidsverdiene holder seg mellom 0 og 1, mens fremdriftsverdier utenfor intervallet gir bevegelse forbi målet.
Hva er fjæranimasjon?
Bevegelse beskrevet med fysiske innstillinger som stivhet, demping og masse i stedet for en fast kurve. CSS kan etterligne fjærer med easing-funksjonen linear().
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår
