Easing in Animationen.
Eine Animation muss immer glaubwürdig wirken, egal wie surrealistisch oder fantastisch die Story auch ist. Das Publikum erwartet ein gewisses Maß an Authentizität für die Bewegung, die wir in der Animation nachbilden. Unter Easing versteht man in der Animation eine Methode zur Gestaltung von Übergängen. Die Bewegungen werden modifiziert, um flüssiger und harmonischer zu wirken. In Programmen wie After Effects, Premiere Pro und Animate wird der Easing-Effekt mithilfe von Keyframes auf der Timeline gesteuert. In diesem Leitfaden zeigen wir dir, wie das geht.
Was ist Easing in Animationen?
In Animationen wird Easing, das oft auch als Beschleunigung bezeichnet wird, verwendet, um Bewegungen natürlicher wirken zu lassen. Bei linear ablaufenden Bewegungen, d. h. solchen, die ohne Easing animiert werden, bleibt die Geschwindigkeit gleich, und die Bewegung wirkt mechanisch. Wir nehmen sie als unnatürlich wahr, da Bewegung mit konstanter Geschwindigkeit in der Realität nicht vorkommt.
Im echten Leben verläuft eine Bewegung niemals durchgängig im selben Tempo – sie beginnt langsam, wird schneller und zum Ende hin wieder langsamer.
Nehmen wir das Beispiel einer Autofahrt: Das Auto steht, man fährt an, beschleunigt und behält die Geschwindigkeit eine Zeit lang bei, am Ende der Fahrt bremst man ab und hält an.
Mit den Easing-Funktionen lassen sich diese Geschwindigkeitsveränderungen bei der Animation von Bewegung simulieren. Die Bewegungen wirken dadurch viel natürlicher.
- Mit Ease In beginnt die Animation langsam und wird zum Ende hin schneller.
- Mit Ease Out beginnt sie schnell und wird am Ende langsamer.
- Ease In/Out ist eine Kombination aus beiden Optionen.
Wie funktioniert Easing?
Bei der Animation von Objekten werden sogenannte Keyframes gesetzt, die den Start- und Endpunkt der Bewegung markieren.
Diese „Schlüsselbilder“ sind wichtige Bilder oder Frames, die sich auf einer bestimmten Position auf der Zeitleiste befinden und einen Zeitwert festlegen. Das System kann anhand der Keyframes berechnen, wie die Frames zwischen den Keyframes funktionieren sollen.
Im Grunde geben die Keyframes die Anweisungen für die Animation der zwischen ihnen liegenden Frames. Die gewählte Easing-Option wirkt sich dann auf die Art und Weise, wie sich ein Objekt zwischen den Keyframes bewegt, aus.
Welche Vorteile bietet Easing?
Durch Easing wird eine Bewegung verändert, um eine bestimmte Wirkung auf das Publikum zu erzielen. Hier einige der Effekte, die sich mit Easing erzeugen lassen:
- Natürlichkeit: Lineare Bewegung kommt in der Natur nicht vor. In Animationen wirkt sie daher flach und mechanisch und damit langweilig für das Publikum. Realismus und Genauigkeit sind wesentliche Voraussetzungen für glaubwürdige und nachvollziehbare Bewegungen.
- Realismus: Durch Easing gibt man dem Publikum Zeit, das Gesehene zu verarbeiten. Die Animation wirkt flüssig und natürlich. Dadurch wird die „Willing Suspension of Disbelief“ aufrechterhalten, das heißt, der Realitätsgehalt wird nicht hinterfragt.
- Lebendigkeit: Easing kann auch verwendet werden, um einen humoristischen Effekt oder Spannung zu erzeugen. Zum Beispiel Ease-in-Animationen, die langsam beginnen und zum Ende hin schnell werden, wie bei Wile E. Coyote, wenn er über einen Abgrund rennt, kurz in der Luft hängt und dann in die Schlucht stürzt. In Computer-Animationen würde man für einen solchen Effekt die Easing-Funktion benötigen.
- Anpassbarkeit: Es gibt eine Reihe von Easing-Effekten. Bei einigen beginnt die Bewegung schnell, bei anderen langsam. Bei manchen Effekten wird die Bewegung am Ende langsamer. Durch Easing lässt sich normalerweise jede Art von Bewegungseffekt erzeugen.
Easing in After Effects.
After Effects ist das Programm der Wahl, wenn es um Spezialeffekte und Postproduktion geht. So wendest du Easing auf deine Animationen in After Effects an:
- Öffne die Animation. Verschiebe die Zeitmarke an den Anfang der Zeitleiste im Schnittfenster. Die Keyframes werden als einfache, lineare Keyframes gesetzt, sodass eine durchgängig konstante Geschwindigkeit erzeugt wird.
- Klicke auf den ersten Keyframe, mache einen Rechtsklick, und wähle Keyframe-Assistenten.
- Der Assistent bietet die Optionen Easy Ease, Easy Ease In und Easy Ease Out.
- Mit diesen Optionen wird der Keyframe geändert, sodass statt einer linearen Bewegung Easing angewendet wird. Je nach ausgewählter Option ändert sich auch die Form des Keyframe-Symbols. Lineare Keyframes werden als Raute dargestellt, „Easy Ease Out“-Keyframes durch einen nach links zeigenden Pfeil.
- Wähle die passenden Easing-Optionen für deine Bewegung aus. Setze beispielsweise den ersten Keyframe auf „Ease Out“ und den letzten auf „Ease In“. Dadurch erzeugst du eine natürliche Bewegung mit realistischer Beschleunigung und Verlangsamung.
- Achte auf den Zeitabstand zwischen den Keyframes im Schnittfenster. Je kürzer das Zeitintervall, desto schneller ist die Bewegung, da sie vor dem nächsten Keyframe abgeschlossen sein muss. Bei einem längeren Abstand ist die Bewegung sehr viel langsamer, da mehr Zeit bis zum nächsten Keyframe zur Verfügung steht.
- Um das Zeitintervall zu ändern, kannst du die Keyframes einfach auf der Zeitleiste weiter nach vorne oder hinten verschieben.
- Im Diagramm-Editor kannst du die Easing-Effekte in einer Kurvenansicht anzeigen.
Easing in Animate.
In Adobe Animate kann Easing sogar auf mehrere Eigenschaften gleichzeitig angewendet werden. So kannst du bei einem Objekt, das sich gleichzeitig bewegt und dreht, jeder Bewegung einen anderen Easing-Grad zuweisen.
Und so funktioniert‘s:
- Wähle im klassischen Tween-Bereich einen Keyframe in der Animation aus, und gehe im Bedienfeld „Eigenschaften“ zum Abschnitt „Tweening“.
- Wähle im Dropdown-Menü „Beschleunigung“ die Option „Eigenschaften separat“.
- Es werden Felder für jede Eigenschaft angezeigt. Klicke auf „Classic Ease“, um das Fenster mit den Beschleunigungsvorgaben zu öffnen, und wähle die gewünschten Beschleunigungsoptionen für die Eigenschaft aus.
- Über die Option „Custom“ kannst du die Beschleunigung individuell definieren. Im Bedienfeld „Benutzerdefinierte Beschleunigung“ wird dafür ein Diagramm mit der Beschleunigungskurve angezeigt. Der Beschleunigungsgrad lässt sich einfach durch Ziehen anpassen.
- Zur Erinnerung: Die Beschleunigung kann auch allen Eigenschaften zugleich zugewiesen werden. Öffne einfach erneut das Menü „Beschleunigung“, und wähle die gewünschten Optionen aus.
Weitere Infos zur Bearbeitung von Bewegungs-Tweens mit Animate
Easing in Premiere Pro.
In Premiere Pro stehen mehrere Easing-Optionen zur Auswahl, darunter „Langsam einschwenken“, „Langsam ausschwenken“, „Unterdrücken“, „Bézier, automatisch“ und „Bézier, gleichmäßig“.
„Bézier“ ermöglicht die manuelle Anpassung der Bewegungskurve, während mit „Bézier, automatisch“ eine fließende Änderungsrate erzeugt wird.
Die Anwendung der Easing-Funktionen auf die Keyframes ist ganz einfach.
- Setze Keyframes für deine Animation.
- Wähle einen Keyframe aus, und gehe zum Bedienfeld Effekteinstellungen.
- Mache rechts im Bedienfeld einen Rechtsklick auf den Keyframe (kleine blaue Raute). Standardmäßig sollte die Option „Linear“ aktiviert sein.
- Klicke mit der rechten Maustaste, um das Dropdown-Menü Zeitliche Interpolation zu öffnen.
- Wähle die gewünschte Easing-Option aus, oder verwende Optionen wie „Bézier“, um die Beschleunigung anzupassen.
- Klicke für jeden Keyframe mit der rechten Maustaste in das Schnittfenster, und wähle „Clip-Keyframes einblenden > Bewegung > Position“, um die Beschleunigungskurve des Keyframes im Schnittfenster zu bearbeiten. So kannst du abruptere oder weichere Übergänge erzeugen.
Häufig gestellte Fragen.
Wozu dient Easing?
Mit Easing wird die Bewegung einer Animation angepasst, um sie interessanter und realistischer aussehen zu lassen. Die Animation wird beschleunigt und verlangsamt, sodass eine ursprünglich langweilige oder abrupte Bewegung natürlicher und die Animation insgesamt professioneller wirkt. Durch ein Abbremsen am Anfang und am Ende der Animation sieht die Bewegung weicher und harmonischer aus.
Was ist eine CSS-Animation?
Eine CSS-Animation (Cascading Style Sheets) setzt sich aus einer Abfolge von Befehlen zusammen. Mit den Befehlen wird definiert, wie die Animation auf der Seite angezeigt wird, wenn ein Objekt von einer CSS-Stilkonfiguration zur nächsten übergeht. Um den Start- und Endzustand des Animationsstils festzulegen und weitere Anpassungen vorzunehmen, werden im CSS-Code Keyframes definiert. CSS-Animationen werden in der Regel flüssig wiedergegeben und bieten ein hohes Maß an Kontrolle über das Endprodukt.
Welche Arten von Easing-Funktionen gibt es in CSS?
Die wichtigsten Easing-Funktionen in CSS sind „linear“, „ease-out“„ease-in“ und „ease-in-out“. Mit ihnen lassen sich natürlichere Keyframe-Übergänge in CSS-Animationen erzeugen.
Was ist ein linearer Übergang in CSS?
Bei einem linearen Übergang bleibt das Tempo während der gesamten Animation gleich. Zeit und Wert der Keyframes verändern sich im selben Verhältnis. Dies kann roboterhaft und unnatürlich wirken. Häufig wird daher mithilfe der Easing-Funktionen eine flüssigere Bewegung erzeugt, die als authentischer wahrgenommen wird.
Was ist „ease-out“ in CSS?
Bei „Ease-out“-Effekten startet die Bewegung schnell und wird dann langsamer. Sie sind ideal geeignet für Animationen, die eine Nutzerinteraktion veranschaulichen, da die höhere Geschwindigkeit zu Beginn den Eindruck einer schnellen Reaktionszeit vermittelt. Dieser CSS-Übergang kann auch für Icons verwendet werden, die auf dem Screen eingeblendet werden, damit bei den Nutzerinnen und Nutzern das Gefühl erzeugt wird, dass ihnen sofort geholfen wird.
Was ist „ease-in“ in CSS?
Dieser Übergang wird seltener eingesetzt, da der langsame Start und das plötzliche Ende die Betrachtenden möglicherweise abschreckt. Er eignet sich jedoch für die Animation von Icons oder Bildern, die vom Bildschirm verschwinden, vor allem, wenn das animierte Objekt den Bildschirm vollständig verlässt, bevor die Bewegung endet. „Ease-in“-Übergänge sollten kurz gehalten werden. Sind sie zu lang, könnte dies bei den Betrachtenden zu Ungeduld führen.
Was ist „ease-in-out“ in CSS?
Der „ease-in-out“-Übergang ist eine Kombination aus „ease-in“ und „ease-out“. Er beginnt langsam und wird in der Mitte schneller. Dieser Übergang ist optimal geeignet für Animationen, die in einer Schleife abgespielt werden.