Easing förklarat: därför känns bra rörelse naturlig

Easing är hur farten i en rörelse förändras medan den spelas. Utan easing rör sig ett föremål med en enda jämn fart och stannar tvärt, vilket ser mekaniskt ut. Med easing accelererar och bromsar det som riktiga saker gör: en låda glider ut snabbt och lägger sig till rätta, en boll ökar farten när den faller. Att välja rätt easing är det snabbaste sättet att få vilken animation som helst att kännas naturlig.

Hur easing ser ut

Animatörer ritar easing som ett avståndsdiagram: var ett föremål befinner sig vid lika stora tidssteg. När märkena ligger jämnt är farten konstant. När de klumpar ihop sig rör sig föremålet långsamt, och när de sprids ut rör det sig snabbt. Här är de fyra grundläggande formerna av easing, var och en med elva lika stora ögonblick av samma rörelse från vänster till höger.

De fyra easingsätt du faktiskt behöver

CSS namnger fem grundkurvor, och designverktyg använder samma idéer under liknande namn. Fyra av dem täcker nästan alla uppgifter. Den femte, ease, är webbläsarens standard: en kurva som börjar ganska snabbt och landar mjukt, ungefär som en mildare ease-out.

Logiken är fysisk. Något som kommer in ska redan röra sig när det dyker upp och sedan lägga sig till rätta, så det använder ease-out. Något som lämnar ska samla fart på vägen ut, så det använder ease-in. Linjärt är fel för en enstaka rörelse men rätt för allt kontinuerligt: en loop som mjukar upp sina ändar verkar tveka varje gång den upprepas, som sömlösa loopar förklarar.

Hur cubic-bezier-kurvor fungerar

Varje CSS-easingkurva dras mellan två fasta punkter, starten (0, 0) och slutet (1, 1). En cubic-bezier() lägger till två kontrollpunkter som böjer kurvan. Den vågräta axeln är tid och den lodräta är förlopp. Tidsvärdena måste ligga mellan 0 och 1, men förloppsvärdena kan gå utanför, vilket får en rörelse att skjuta över sitt mål och komma tillbaka.

/* 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 referens för easingfunktioner listar alla former CSS accepterar, inklusive steps() för bild-för-bild-rörelse.

Fjädrar: easing från fysiken

En fjäder använder inte en fast kurva och varaktighet. I stället beskriver du fysiken, oftast styvhet (hur kraftigt den drar mot målet), dämpning (hur snabbt den lugnar sig) och massa, och rörelsen följer av det. Styva, väl dämpade fjädrar känns snärtiga och exakta. Lösa, lätt dämpade fjädrar studsar. Fjädrar är populära i appgränssnitt eftersom de reagerar naturligt när en rörelse avbryts halvvägs.

Många animationsbibliotek erbjuder fjädrar direkt. I vanlig CSS kan funktionen linear() approximera en genom att lista punkter längs dess bana, vilket moderna webbläsare stöder.

/* 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);
}

Easing och varaktighet hör ihop

Samma kurva känns olika vid olika längd. En ease-out över 150 millisekunder läses som ett skarpt knäpp, över 800 som ett långsamt glid. Anpassa båda efter sträckan och uppgiften. Principer för rörelsedesign har typiska varaktigheter.

Easing i JavaScript, designverktyg och video

Samma kurvor fungerar utanför CSS. I JavaScript tar Web Animations API en CSS-easingsträng. Design- och videoverktyg använder samma idéer under namn som ease in, ease out och ease in and out, oftast med en grafredigerare för egna kurvor och, i många prototypverktyg, fjäderförinställningar.

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' },
)

Vilken kurva du än väljer föredrar vissa människor mindre rörelse. Respektera deras inställning genom att korta ner eller ta bort rörelse. Minskad rörelse visar hur. Och för loopande bakgrunder, där linjärt oftast är rätt, se animerade gradientbakgrunder.