Easing i animation: ease in, ease out och kurvor
Easing är hur ett animerat värde accelererar och bromsar mellan keyframes i stället för att röra sig med konstant hastighet. En ease får rörelse att börja mjukt, sluta mjukt eller båda — så som föremål med tyngd verkligen rör sig — och den ställs in av interpolationskurvan mellan två keys.
Av Mixos
Det korta svaret
Easing styr accelerationen mellan keyframes. Linjär rörelse går med konstant hastighet och stannar abrupt; easad rörelse accelererar ut ur en key och bromsar in i nästa. Eftersom verktyg inte är överens om vad ”ease in” betyder är det tydligast att säga långsam start (acceleration) eller långsamt slut (inbromsning). Bezier-handtag på varje key formar easen exakt, och ett handtag draget bortom keyns värde skapar överskjutning.
Varför konstant hastighet ser fel ut
Verkliga föremål har massa. En bil når inte marschfart i samma ögonblick den rör sig, och en dörr stannar inte tvärt vid bildrutan. Rörelse som startar och stannar med full hastighet läses som mekanisk, tyngdlös eller datorgenererad, även när publiken inte kan säga varför.
Disneys animatörer kallade denna princip slow in och slow out — en av animationens tolv principer i The Illusion of Life. Fler teckningar nära början och slutet av en rörelse och färre i mitten får den att accelerera och bromsa. I 3D-programvara kommer samma effekt från kurvan mellan keys snarare än från extra teckningar.
Ease in och ease out betyder motsatta saker
Detta är den vanligaste källan till förvirring, och det är inte ditt fel. I CSS och i Robert Penners flitigt kopierade easingfunktioner betyder ease-in att rörelsen börjar långsamt och ökar, och ease-out att den börjar snabbt och saktar in till stopp. Kurvan tillhör hela rörelsen mellan två keys.
I After Effects och många keybaserade verktyg tillhör easing i stället en key: easing in i en key betyder att sakta ned när rörelsen når den, och easing ut ur en key betyder att starta långsamt när rörelsen lämnar den. Så en ease in i After Effects på sista keyn och en CSS-ease-out på rörelsen ger samma inbromsning under motsatta namn. Att beskriva rörelsen — långsam start, långsamt slut, långsamt i båda ändar — undviker tvetydigheten.
Interpolationstyper och bezier-handtag
Linjär interpolation drar en rät linje mellan keys: konstant hastighet och en abrupt förändring vid varje key. Konstant, stegad eller hold-interpolation behåller värdet till nästa key och hoppar sedan, vilket är användbart för blockning, blinkningar och allt som ska snappa. Bezier- eller splineinterpolation drar en jämn kurva genom keys och är där easing bor.
En bezier-key har två handtag, ett som styr kurvan in mot keyn och ett som styr den ut. Ett platt handtag betyder noll hastighet vid keyn — en ease. Ett längre handtag håller kvar den långsamheten under mer av rörelsen. Handtag i linje passerar keyn mjukt; handtag som bryts isär skapar en skarp riktningsändring, som en studs. Dra ett handtag så att kurvan överskjuter keyns värde och rörelsen går förbi sitt mål och sätter sig tillbaka.
De vanliga easingfamiljerna
Penners easingekvationer, publicerade i början av 2000-talet, blev det gemensamma ordförrådet för namngivna kurvor: sine, quad, cubic, quart, quint, expo och circ, var och en i en in-, out- och in-out-form, från knappt märkbar (sine) till våldsam (expo). Back överskjuter sitt mål innan den sätter sig. De flesta rörelseverktyg och CSS-bibliotek levererar någon version av uppsättningen, oftast approximerad som kubiska bezier-kurvor.
Elastic och bounce är undantagen. De oscillerar flera gånger inom en rörelse, vilket en enda kubisk bezier inte kan göra, så verktyg bygger dem antingen av flera keys eller genererar dem procedurellt.
Vilken ease ska man använda
Använd ease i båda ändar för de flesta rörelser som startar och stannar: en kameraframkörning, ett föremål som glider på plats, en huvudvridning. Använd ett långsamt slut för saker som anländer och sätter sig, och en långsam start för saker som skjuts iväg. Behåll linear för rörelse som är avsedd att vara konstant — en snurrande fläkt, ett transportband, mitten av en loopande cykel — och för keys som rörelsen ska passera rakt igenom. Använd hold för snaps, blinkningar och blockning.
Easing i Mixos Studio
Markera en key så erbjuder tidslinjens huvud Linear, Ease in, Ease out, Ease och Hold. De följer den keybaserade konventionen: Ease in saktar ned rörelsen som anländer till keyn, Ease out saktar ned den som lämnar den, och Ease gör båda — After Effects Easy Ease. Med tidslinjen i fokus tillämpar F9 Ease, ⇧F9 Ease in och ⌘⇧F9 Ease out.
Curve… öppnar Penners familjer från Sine till Back, sökbara efter känsla såväl som namn, vid sidan av alla kurvor du sparat. Curves-läget ritar spåren som kurvor med bezier-handtag som du drar direkt, överskjutning inkluderad. Elastic och bounce finns medvetet inte i kurvlistan; i stället skapar spring- och bounce-generatorerna under + Motion den sortens rörelse.
Vanliga frågor
Vad betyder ease in och ease out?
Båda beskriver gradvisa hastighetsförändringar, men verktyg använder dem i motsatta betydelser. I CSS och Penners funktioner är ease-in en långsam start och ease-out ett långsamt slut. I After Effects och andra keybaserade verktyg saktar easing in i en key ned rörelsen när den når den, och easing ut ur en key saktar ned den när den lämnar den.
Vad är skillnaden mellan linjär och bezier-interpolation?
Linjär interpolation flyttar ett värde med konstant hastighet och ändras abrupt vid varje key. Bezier-interpolation drar en jämn kurva genom keys, med handtag som styr hur rörelsen accelererar och bromsar, vilket är det som gör easing möjlig.
Vad är en hold key?
En key med konstant (stegad) interpolation: värdet stannar exakt där det är tills nästa key och hoppar sedan. Den används för blockning, blinkningar, klipp och allt som ska snappa i stället för att färdas.
Hur får jag en animation att överskjuta?
Antingen lägg till en key bortom målet och en stabiliserande key efter den, eller dra bezier-handtaget så att kurvan går bortom keyns värde och återvänder. En easingkurva i back-stil gör samma sak som ett förval.
Varför ser min animation robotlik ut?
Oftast för att den är linjär: konstant hastighet, med abrupta starter och stopp vid varje key. Att lägga easing på starter och stopp, och att förskjuta delar av en rörelse några bilder så att de inte rör sig på en gång, löser det mesta.
