Easing in der Animation: Ease In, Ease Out und Kurven
Easing beschreibt, wie ein animierter Wert zwischen Keyframes beschleunigt und verlangsamt wird, anstatt sich mit konstanter Geschwindigkeit zu bewegen. Ein Ease lässt eine Bewegung sanft beginnen, sanft stoppen oder beides – so wie sich Objekte mit Gewicht tatsächlich bewegen – und wird durch die Interpolationskurve zwischen zwei Keys festgelegt.
Die kurze Antwort
Easing steuert die Beschleunigung zwischen Keyframes. Lineare Bewegung erfolgt mit konstanter Geschwindigkeit und stoppt abrupt; eine ge-easte Bewegung beschleunigt aus einem Key heraus und verlangsamt sich in den nächsten hinein. Da sich Tools uneinig sind, was „Ease In“ bedeutet, ist es am klarsten, „langsamer Start“ (Beschleunigung) oder „langsames Ende“ (Verzögerung) zu sagen. Bezier-Griffe an jedem Key formen das Ease exakt, und ein Griff, der über den Wert des Keys hinausgezogen wird, erzeugt ein Overshoot.
Warum konstante Geschwindigkeit falsch aussieht
Echte Objekte haben Masse. Ein Auto erreicht nicht sofort seine Reisegeschwindigkeit, sobald es sich bewegt, und eine Tür stoppt nicht abrupt am Rahmen. Eine Bewegung, die mit voller Geschwindigkeit beginnt und stoppt, wirkt mechanisch, schwerelos oder computergeneriert, selbst wenn das Publikum nicht sagen kann, warum.
Disneys Animatoren nannten dieses Prinzip „Slow In“ und „Slow Out“ – eines der zwölf Animationsprinzipien, die in „The Illusion of Life“ dargelegt wurden. Mehr Zeichnungen am Anfang und Ende einer Bewegung und weniger in der Mitte lassen sie beschleunigen und verlangsamen. In 3D-Software entsteht derselbe Effekt durch die Kurve zwischen den Keys und nicht durch zusätzliche Zeichnungen.
Ease In und Ease Out bedeuten Gegensätzliches
Dies ist die häufigste Quelle der Verwirrung, und es ist nicht Ihre Schuld. In CSS und in Robert Penners weit verbreiteten Easing-Funktionen bedeutet „Ease-In“, dass die Bewegung langsam beginnt und beschleunigt, und „Ease-Out“, dass sie schnell beginnt und bis zum Stillstand abbremst. Die Kurve gehört zur gesamten Bewegung zwischen zwei Keys.
In After Effects und vielen Key-basierten Tools gehört das Easing stattdessen zu einem Key: „Easing Into“ einen Key bedeutet, dass die Bewegung langsamer wird, wenn sie ihn erreicht, und „Easing Out“ aus einem Key bedeutet, dass die Bewegung langsam beginnt, wenn sie ihn verlässt. So erzeugen ein After Effects „Ease In“ am letzten Key und ein CSS „Ease-Out“ bei der Bewegung dieselbe Verzögerung unter entgegengesetzten Namen. Die Beschreibung der Bewegung – langsamer Start, langsames Ende, langsam an beiden Enden – vermeidet die Mehrdeutigkeit.
Interpolationstypen und Bezier-Griffe
Lineare Interpolation zeichnet eine gerade Linie zwischen Keys: konstante Geschwindigkeit und eine abrupte Änderung bei jedem Key. Konstante, gestufte oder Hold-Interpolation behält den Wert bis zum nächsten Key bei und springt dann, was nützlich ist für Blocking, Blinzeln und alles, was abrupt wechseln soll. Bezier- oder Spline-Interpolation zeichnet eine glatte Kurve durch die Keys, und hier findet das Easing statt.
Ein Bezier-Key hat zwei Griffe, einer steuert die Kurve, die am Key ankommt, und einer die, die ihn verlässt. Ein flacher Griff bedeutet null Geschwindigkeit am Key – ein Ease. Ein längerer Griff hält diese Langsamkeit für einen größeren Teil der Bewegung aufrecht. Griffe in einer Linie passieren den Key sanft; auseinandergezogene Griffe erzeugen eine scharfe Richtungsänderung, wie ein Bounce. Ziehen Sie einen Griff so, dass die Kurve den Wert des Keys überschreitet und die Bewegung über ihr Ziel hinausgeht und sich wieder einpendelt.
Die Standard-Easing-Familien
Penners Easing-Gleichungen, die in den frühen 2000er Jahren veröffentlicht wurden, wurden zum gemeinsamen Vokabular für benannte Kurven: Sine, Quad, Cubic, Quart, Quint, Expo und Circ, jeweils in einer In-, Out- und In-Out-Form, von kaum wahrnehmbar (Sine) bis heftig (Expo). „Back“ überschreitet sein Ziel, bevor es sich einpendelt. Die meisten Motion-Tools und CSS-Bibliotheken liefern eine Version dieses Sets, meist als kubische Bezier-Kurven angenähert.
Elastic und Bounce sind die Ausnahmen. Sie oszillieren mehrmals innerhalb einer Bewegung, was eine einzelne kubische Bezier-Kurve nicht leisten kann, daher erstellen Tools sie entweder aus mehreren Keys oder generieren sie prozedural.
Welches Ease zu verwenden ist
Verwenden Sie ein Ease an beiden Enden für die meisten Bewegungen, die beginnen und stoppen: einen Kamera-Push, ein Objekt, das an seinen Platz gleitet, eine Kopfdrehung. Verwenden Sie ein langsames Ende für Dinge, die ankommen und sich einpendeln, und einen langsamen Start für Dinge, die sich in Bewegung setzen. Behalten Sie Linear für Bewegungen bei, die konstant sein sollen – einen sich drehenden Ventilator, ein Förderband, die Mitte eines Looping-Zyklus – und für Keys, durch die die Bewegung direkt hindurchgehen soll. Verwenden Sie Hold für abrupte Wechsel, Blinzeln und Blocking.
Easing in Mixos Studio
Wählen Sie einen Key aus, und die Timeline-Kopfzeile bietet Linear, Ease In, Ease Out, Ease und Hold. Sie folgen der Key-basierten Konvention: Ease In verlangsamt die Bewegung, die am Key ankommt, Ease Out verlangsamt sie, wenn sie ihn verlässt, und Ease tut beides – After Effects’ Easy Ease. Wenn die Timeline fokussiert ist, wendet F9 Ease an, ⇧F9 Ease In und ⌘⇧F9 Ease Out.
„Kurve…“ öffnet Penners Familien von Sine bis Back, durchsuchbar nach Gefühl und Name, zusammen mit allen von Ihnen gespeicherten Kurven. Der Kurvenmodus zeichnet die Spuren als Kurven mit Bezier-Griffen, die Sie direkt ziehen können, Overshoot inklusive. Elastic und Bounce sind bewusst nicht in der Kurvenliste; die Spring- und Bounce-Generatoren unter „+ Motion“ erzeugen stattdessen diese Art von Bewegung.
Häufig gestellte Fragen
Was bedeuten Ease In und Ease Out?
Beide beschreiben allmähliche Geschwindigkeitsänderungen, aber Tools verwenden sie in entgegengesetztem Sinne. In CSS und Penners Funktionen ist Ease-in ein langsamer Start und Ease-out ein langsames Ende. In After Effects und anderen Keyframe-basierten Tools verlangsamt das Easing in einen Key die Bewegung bei der Ankunft, und das Easing aus einem Key verlangsamt sie beim Verlassen.
Was ist der Unterschied zwischen linearer und Bezier-Interpolation?
Lineare Interpolation bewegt einen Wert mit konstanter Geschwindigkeit und ändert sich abrupt an jedem Keyframe. Bezier-Interpolation zeichnet eine glatte Kurve durch die Keyframes, mit Handles, die steuern, wie die Bewegung beschleunigt und verlangsamt wird, was das Easing ermöglicht.
Was ist ein Hold Key?
Ein Keyframe mit konstanter (gestufter) Interpolation: Der Wert bleibt genau dort, wo er ist, bis zum nächsten Keyframe und springt dann. Er wird für Blocking, Blinzeln, Schnitte und alles verwendet, was springen statt gleiten soll.
Wie erzeuge ich ein Overshoot in einer Animation?
Entweder einen Key über das Ziel hinaus und einen weiteren Key danach hinzufügen, oder den Bezier-Griff so ziehen, dass die Kurve über den Wert des Keys hinausgeht und zurückkehrt. Eine Easing-Kurve im „Back“-Stil tut dasselbe wie ein Preset.
Warum sieht meine Animation roboterhaft aus?
Meistens, weil sie linear ist: konstante Geschwindigkeit, mit abrupten Starts und Stopps bei jedem Key. Das Abmildern der Starts und Stopps und das Versetzen von Bewegungsteilen um einige Frames, damit sie nicht alle gleichzeitig erfolgen, behebt das meiste davon.
Setzen Sie einen Keyframe für eine Bewegung, dann probieren Sie Linear, Ease und Back auf denselben zwei Keyframes aus – der Unterschied ist leichter zu sehen als zu beschreiben.