Easing in animatie: ease in, ease out en curves
Easing is hoe een geanimeerde waarde tussen keyframes versnelt en vertraagt in plaats van met constante snelheid te bewegen. Een ease laat beweging zacht starten, zacht stoppen of allebei — zoals objecten met gewicht echt bewegen — en wordt bepaald door de interpolatiecurve tussen twee keys.
Door Mixos
Het korte antwoord
Easing regelt versnelling tussen keyframes. Lineaire beweging gaat met constante snelheid en stopt abrupt; eased beweging versnelt uit de ene key en vertraagt naar de volgende. Omdat tools het oneens zijn over wat “ease in” betekent, is het het duidelijkst om trage start (versnelling) of trage afronding (vertraging) te zeggen. Bezier-handles op elke key vormen de ease exact, en een handle voorbij de waarde van de key maakt overshoot.
Waarom constante snelheid er verkeerd uitziet
Echte objecten hebben massa. Een auto bereikt zijn kruissnelheid niet op het moment dat hij beweegt, en een deur stopt niet abrupt op het frame. Beweging die met volle snelheid start en stopt, leest als mechanisch, gewichtloos of computergegenereerd, zelfs als het publiek niet kan zeggen waarom.
De animators van Disney noemden dit principe slow in and slow out — een van de twaalf animatieprincipes uit The Illusion of Life. Meer tekeningen rond het begin en einde van een beweging en minder in het midden laten hem versnellen en vertragen. In 3D-software komt hetzelfde effect van de curve tussen keys in plaats van van extra tekeningen.
Ease in en ease out betekenen tegengestelde dingen
Dit is de meest voorkomende bron van verwarring, en het is niet jouw schuld. In CSS en in de veel gekopieerde easingfuncties van Robert Penner betekent ease-in dat de beweging langzaam start en versnelt, en ease-out dat hij snel start en tot stilstand vertraagt. De curve hoort bij de hele beweging tussen twee keys.
In After Effects en veel key-gebaseerde tools hoort easing juist bij een key: easing in een key betekent vertragen terwijl de beweging die bereikt, en easing uit een key betekent langzaam starten terwijl de beweging hem verlaat. Een ease in van After Effects op de laatste key en een CSS ease-out op de beweging geven dus dezelfde vertraging onder tegengestelde namen. De beweging beschrijven — trage start, trage afronding, traag aan beide kanten — voorkomt de dubbelzinnigheid.
Interpolatietypes en bezier-handles
Lineaire interpolatie trekt een rechte lijn tussen keys: constante snelheid en een abrupte verandering bij elke key. Constante, stepped of hold-interpolatie houdt de waarde vast tot de volgende key en springt dan, wat nuttig is voor blocking, knipperen en alles wat moet knappen. Bezier- of spline-interpolatie tekent een vloeiende curve door de keys en is waar easing woont.
Een bezier-key heeft twee handles, een voor de curve die bij de key aankomt en een voor de curve die hem verlaat. Een vlakke handle betekent nulsnelheid bij de key — een ease. Een langere handle houdt die traagheid langer vast in de beweging. Handles op één lijn gaan soepel door de key; handles die uit elkaar zijn gebroken geven een scherpe richtingsverandering, zoals een stuiter. Trek een handle zo dat de curve de waarde van de key overschiet en de beweging voorbij zijn doel gaat en terugzakt.
De standaard easingfamilies
De easingvergelijkingen van Penner, begin jaren 2000 gepubliceerd, werden het gedeelde vocabulaire voor benoemde curves: sine, quad, cubic, quart, quint, expo en circ, elk in een in-, out- en in-out-vorm, van nauwelijks merkbaar (sine) tot hevig (expo). Back schiet over zijn doel heen voor hij zakt. De meeste bewegingstools en CSS-bibliotheken leveren een versie van de set, meestal benaderd als cubic-bezier-curves.
Elastic en bounce zijn de uitzonderingen. Ze oscilleren meerdere keren binnen één beweging, wat een enkele cubic bezier niet kan, dus tools bouwen ze uit meerdere keys of genereren ze procedureel.
Welke ease je gebruikt
Ease beide uiteinden voor de meeste bewegingen die starten en stoppen: een camera-push, een object dat op zijn plek glijdt, een hoofddraai. Gebruik een trage afronding voor dingen die aankomen en tot rust komen, en een trage start voor dingen die gelanceerd worden. Houd linear voor beweging die constant hoort te zijn — een draaiende ventilator, een lopende band, het midden van een loopcyclus — en voor keys waar de beweging rechtdoor doorheen moet. Gebruik hold voor knappen, knipperen en blocking.
Easing in Mixos Studio
Selecteer een key en de timelinekop biedt Linear, Ease in, Ease out, Ease en Hold. Ze volgen de key-gebaseerde conventie: Ease in vertraagt de beweging bij aankomst op de key, Ease out vertraagt hem bij vertrek, en Ease doet beide — Easy Ease van After Effects. Met de timeline in focus past F9 Ease toe, ⇧F9 Ease in en ⌘⇧F9 Ease out.
Curve… opent de families van Penner van Sine tot Back, doorzoekbaar op gevoel en op naam, naast alle curves die je hebt opgeslagen. De Curves-modus tekent de tracks als curves met bezier-handles die je direct sleept, overshoot inbegrepen. Elastic en bounce staan bewust niet in de curvelijst; de spring- en bounce-generators onder + Motion maken dat soort beweging in plaats daarvan.
Veelgestelde vragen
Wat betekenen ease in en ease out?
Beide beschrijven geleidelijke snelheidsveranderingen, maar tools gebruiken ze in tegengestelde zin. In CSS en de functies van Penner is ease-in een trage start en ease-out een trage afronding. In After Effects en andere key-gebaseerde tools vertraagt easing in een key de beweging bij aankomst, en easing uit een key vertraagt hem bij vertrek.
Wat is het verschil tussen lineaire en bezier-interpolatie?
Lineaire interpolatie beweegt een waarde met constante snelheid en verandert abrupt bij elke key. Bezier-interpolatie tekent een vloeiende curve door de keys, met handles die bepalen hoe de beweging versnelt en vertraagt, en dat maakt easing mogelijk.
Wat is een hold-key?
Een key met constante (stepped) interpolatie: de waarde blijft precies waar hij is tot de volgende key en springt dan. Het wordt gebruikt voor blocking, knipperen, cuts en alles wat moet knappen in plaats van reizen.
Hoe laat ik een animatie overshooten?
Voeg ofwel een key voorbij het doel toe en een settling-key daarna, of trek de bezier-handle zodat de curve voorbij de waarde van de key gaat en terugkeert. Een back-achtige easingcurve doet hetzelfde als preset.
Waarom ziet mijn animatie er robotachtig uit?
Meestal omdat hij lineair is: constante snelheid, met abrupte starts en stops bij elke key. Easing op de starts en stops, en delen van een beweging een paar frames verschuiven zodat ze niet allemaal tegelijk bewegen, lost het meeste op.
