Timing & Principles

Die Pose wird nur alle 2 oder 3 Frames aktualisiert, was einen ruckeligeren, handgezeichneten Rhythmus ergibt als Bewegung auf jedem Frame (on ones).

Das ist für ein Motion-Graphics-Video. Animiere [Szene] mit „Animating on Twos“ (auch on twos oder held frames genannt): Halte jede Pose zwei Frames lang, sodass sich das Bild nur halb so oft aktualisiert, wie das Video Frames abspielt.
Die Bewegung soll ihre Bahn und ihr Gesamttempo behalten, aber in kleinen, gleichmäßigen Rucken vorankommen, wie handgezeichnete oder Stop-Motion-Animation – nicht in wenigen großen Sprüngen mit langen Pausen, das wäre ein Stepped Ease.
Halte das [Dauer] lang durch, und halte jede Pose einen Frame länger (on threes), wenn es noch ruckeliger wirken soll.

Eine kleine Bewegung in die Gegenrichtung vor der Hauptbewegung, wie ein Ausholen; am Anfang der Bewegung das Gegenstück zum Overshoot.

Das ist für ein Motion-Graphics-Video. Beginne die Bewegung in [Szene] mit Antizipation („Anticipation“, auch wind-up oder back in genannt): Das Objekt zieht sich erst ein wenig in die Gegenrichtung zurück und schnellt dann in die Hauptbewegung los.
Das Zurückziehen gehört an den Anfang, bevor das Objekt startet – es ist das Spiegelbild eines Overshoots, der am Ende über das Ziel hinausläuft.
Bring das Ausholen und die Bewegung in [Dauer] unter, und halte das Zurückziehen klein und ohne Eile, damit der Start danach schnell wirkt.

Das Objekt folgt einer gekrümmten Bahn statt einer geraden Linie; zum Vergleich dient eine gerade Bewegung von A nach B.

Das ist für ein Motion-Graphics-Video. Bewege das Objekt in [Szene] entlang von „Arcs“ (auch arc motion oder curved path genannt): Es wandert auf einer gekrümmten Bahn statt auf einer geraden Linie von einer Position zur nächsten.
Start- und Endpunkt bleiben, wo sie sind – nur die Bahn dazwischen krümmt sich, so wie sich ein geworfener Ball oder ein schwingender Arm bewegt, während eine gerade Bewegung von A nach B mechanisch aussieht.
Bring die Bewegung in [Dauer] unter, und halte die Kurve als einen einzigen weichen Schwung ohne Knicke unterwegs.

Das Objekt trifft sein Ziel wie ein Ball den Boden und prallt mit immer kleineren Hüpfern zurück, bis es ruht; anders als bei Elastic gibt es bei jedem Kontakt einen harten Stopp.

Das ist für ein Motion-Graphics-Video. Beende die Bewegung in [Szene] mit einem „Bounce“ (auch bounce ease oder bounce out genannt): Das Objekt trifft sein Ziel wie ein Ball den Boden und prallt in immer kleineren Hüpfern zurück, bis es ruht.
Es soll nie durch das Ziel hindurchgehen – jeder Kontakt ist ein harter Stopp, der es sofort zurückwirft, anders als ein Elastic-Easing, das auf beiden Seiten über das Ziel hinausschwingt.
Bring die Bewegung samt ihren Hüpfern in [Dauer] unter, und mache jeden Hüpfer deutlich kürzer als den davor.

Die Bewegung wiederholt sich von vorn; bei einem nahtlosen Loop stimmt der Endzustand mit dem Anfang überein, sodass kein Neustart zu sehen ist.

Das ist für ein Motion-Graphics-Video. Wiederhole die Bewegung in [Szene] als „Cycle Loop“ (auch loop oder repeat genannt): Jedes Mal, wenn sie das Ende erreicht, beginnt sie wieder von vorn.
Sie soll an den Anfang zurückspringen, statt rückwärts zu laufen, das wäre ein Ping-Pong Loop. Für einen nahtlosen Loop lässt du den letzten Frame mit dem ersten übereinstimmen, damit der Neustart nicht zu sehen ist.
Lass sie [Dauer] lang loopen; wenn jede Wiederholung dort weitermachen soll, wo die letzte endete, statt an den Anfang zurückzukehren, mache daraus einen Offset-Loop.

Beginnt langsam und beschleunigt zum Ende hin, sodass das Objekt mit vollem Tempo davonzieht; das Gegenteil von Ease Out.

Das ist für ein Motion-Graphics-Video. Animiere die Bewegung in [Szene] mit einem „Ease In“ (auch slow in oder accelerating genannt): Sie beginnt langsam und wird immer schneller, sodass das Objekt am Ende der Bewegung volles Tempo hat.
Mache das Ende nicht weich – das wäre ein Ease Out, die entgegengesetzte Kurve, die schnell beginnt und sanft zur Ruhe kommt.
Bring die Bewegung in [Dauer] unter; sie passt zu einem Objekt, das das Bild verlässt, weil man es nie anhalten sieht.

Langsamer Start, schnelle Mitte, langsamer Stopp; anders als bei Ease Out beschleunigt die Bewegung auch am Anfang sanft.

Das ist für ein Motion-Graphics-Video. Animiere die Bewegung in [Szene] mit einem „Ease In-Out“ (auch easy ease oder slow in and slow out genannt): Sie beginnt langsam, ist in der Mitte am schnellsten und bremst zu einem weichen Stopp ab.
Beide Enden sollen sanft sein – anders als bei einem Ease Out, der mit vollem Tempo beginnt und nur den Stopp weich macht.
Bring die Bewegung in [Dauer] unter, und wähle eine stärkere Kurve, wenn die Mitte wie ein schnelles Schnappen zwischen zwei Ruhepunkten wirken soll.

Beginnt schnell und bremst zu einem weichen Stopp ab; das Objekt trifft bereits in Bewegung ein und kommt sanft zur Ruhe, das Gegenteil von Ease In.

Das ist für ein Motion-Graphics-Video. Animiere die Bewegung in [Szene] mit einem „Ease Out“ (auch slow out oder decelerating genannt): Sie beginnt mit vollem Tempo und wird stetig langsamer bis zu einem weichen Stopp.
Mache den Anfang nicht weich – das Objekt soll schon in Bewegung sein, wenn es erscheint, anders als bei einem Ease In-Out, der auch das Tempo sanft aufbaut.
Bring die Bewegung in [Dauer] unter; sie passt zu einem Element, das ins Bild kommt und an seinem Platz zur Ruhe kommt.

Kein einzelner Look, sondern das Prinzip, dass sich das Tempo über eine Bewegung hinweg ändert; im Vergleich mit Linear zeigt sich, dass Bewegung mit Easing natürlich statt mechanisch wirkt.

Das ist für ein Motion-Graphics-Video. Gib jeder Bewegung in [Szene] „Easing“ (auch timing curve oder speed curve genannt): Lass das Tempo im Verlauf jeder Bewegung variieren, statt es konstant zu halten.
Bewegung mit konstantem Tempo (linear) sieht mechanisch aus; Bewegung mit Easing nimmt Fahrt auf und bremst ab wie echte Dinge – Ease Out für Dinge, die ankommen, Ease In für Dinge, die gehen, Ease In-Out für Bewegungen, die im Bild bleiben.
Halte jede Bewegung innerhalb von [Dauer], und nutze durchgehend dieselbe Kurvenfamilie, damit das Stück einheitlich wirkt.

Schwingt mehrmals mit abnehmender Amplitude um das Ziel, wie ein gespanntes Gummiband, das losgelassen wird; mehr Schwingungen als bei Overshoot.

Das ist für ein Motion-Graphics-Video. Animiere die Bewegung in [Szene] mit „Elastic“-Easing (auch elastic ease oder elastic out genannt): Das Objekt schnellt zu seinem Ziel und schwingt darum hin und her, jeder Ausschlag kleiner, wie ein gespanntes Gummiband, das losgelassen wird.
Es soll das Ziel mehrmals kreuzen – ein Overshoot geht nur einmal darüber hinaus, und ein Bounce geht nie darüber hinaus.
Bring die Bewegung und das Nachschwingen in [Dauer] unter, und lass das Nachschwingen vor dem Ende ganz abklingen.

Eine reale Bewegung, in Ausmaß oder Timing extremer getrieben als die Wirklichkeit; sichtbar wird sie nur als Wahl der Intensität im Vergleich mit einer realistischen Version.

Das ist für ein Motion-Graphics-Video. Animiere [Szene] mit Übertreibung („Exaggeration“): Nimm die Bewegung, wie sie wirklich ablaufen würde, und treibe sie weiter – ein größeres Ausholen, eine längere Dehnung, ein härterer Stopp.
Es ist dieselbe Aktion mit hochgedrehter Intensität, keine andere: Behalte die Bahn und die Reihenfolge der Ereignisse bei, und vergrößere, wie weit und wie scharf jedes davon ausfällt.
Bring das Ganze in [Dauer] unter, und höre kurz vor dem Punkt auf, an dem das Objekt nicht mehr erkennbar ist – es soll cartoonhaft und verspielt wirken, nicht kaputt.

Lose befestigte Teile bewegen sich weiter oder hängen nach, wenn der Hauptkörper stoppt oder startet, sodass sich nicht alle Teile gemeinsam bewegen und anhalten.

Das ist für ein Motion-Graphics-Video. Animiere [Szene] mit „Follow Through and Overlapping Action“ (auch drag oder lag genannt): Die lose befestigten Teile hängen nach, wenn sich der Hauptkörper in Bewegung setzt, und laufen weiter, schwingen über ihre Ruhelage hinaus und kommen zur Ruhe, nachdem er gestoppt hat.
Die Teile dürfen sich nicht alle gemeinsam bewegen und anhalten. Sie sind passiv – vom Körper mitgezogen –, anders als eine Secondary Action, die eine kleine eigene Geste ist und neben der Hauptaktion läuft.
Bring die Bewegung und das Auspendeln in [Dauer] unter, und lass längere oder leichtere Teile weiter nachhängen und länger brauchen, bis sie zur Ruhe kommen.

Konturen zittern von Frame zu Frame leicht, als wären sie jedes Mal neu gezeichnet, was einen lebendigen, handgemachten Look ergibt, selbst wenn die Form still steht.

Das ist für ein Motion-Graphics-Video. Gib den Konturen in [Szene] einen „Line Boil“ (auch boiling lines oder wiggly lines genannt): Zeichne jede Linie alle paar Frames leicht anders neu, sodass sie auf der Stelle zittert, auch wenn die Form selbst still steht.
Er soll sich in kleinen, plötzlichen Schritten mit niedriger Bildrate ändern, wie beim Durchblättern von Hand durchgepauster Zeichnungen – nicht weich fließen, das wirkt wie Flüssigkeit, und nicht die ganze Form umherschieben, das ist ein Wiggle.
Lass ihn [Dauer] lang laufen, und halte das Zittern so klein, dass die Form gut lesbar bleibt.

Das Objekt geht leicht über sein Ziel hinaus und kehrt dann dorthin zurück; anders als bei Bounce geht es einmal darüber hinaus und kommt zur Ruhe, ohne auf einen Boden zu treffen.

Das ist für ein Motion-Graphics-Video. Beende die Bewegung in [Szene] mit einem „Overshoot“ (auch back ease oder back out genannt): Das Objekt läuft leicht über sein Ziel hinaus, kehrt dann zurück und kommt darauf zur Ruhe.
Es soll nur einmal über das Ziel hinausgehen, ohne Nachschwingen danach – ein Bounce trifft das Ziel und prallt zurück, ohne darüber hinauszugehen, und ein Elastic-Easing schwingt mehrmals darüber hinaus.
Bring die Bewegung in [Dauer] unter, und halte den Overshoot klein, damit er als Energie wirkt und nicht als Fehler.

Die Bewegung läuft immer wieder vorwärts und dann rückwärts; anders als der Cycle Loop springt sie nicht an den Anfang zurück.

Das ist für ein Motion-Graphics-Video. Wiederhole die Bewegung in [Szene] als „Ping-Pong Loop“ (auch yoyo oder boomerang genannt): Sie läuft vorwärts bis zum Ende, dann rückwärts zurück zum Anfang, und immer weiter hin und her.
Sie soll nie springen – ein Cycle Loop springt auf den ersten Frame zurück und beginnt neu, während dieser hier seinen eigenen Weg zurückverfolgt.
Lass sie [Dauer] lang laufen, mit einer weichen Wende an jedem Ende, damit sich der Richtungswechsel wie Atmen anfühlt und nicht wie ein Aufprall auf eine Wand.

Eine kleinere, unterstützende Bewegung läuft neben der Hauptbewegung und bringt Leben hinein, ohne ihr die Aufmerksamkeit zu stehlen.

Das ist für ein Motion-Graphics-Video. Füge der Hauptbewegung in [Szene] eine „Secondary Action“ hinzu: eine kleinere, unterstützende Bewegung, die neben ihr läuft – ein kleiner Akzent, ein Blinzeln, ein Schnippen – und ihr mehr Leben gibt.
Sie ist eine kleine eigene Geste, kein loses Teil, das hinter dem Körper hergezogen wird (das ist Follow Through), und sie darf nie die Aufmerksamkeit von der Hauptaktion abziehen.
Bring beide in [Dauer] unter, und lass die kleine Bewegung innerhalb der Hauptbewegung beginnen und enden.

Ein oder zwei Zwischenframes verzerren oder vervielfachen das Motiv entlang seiner Bahn, um bei einer sehr schnellen Bewegung Bewegungsunschärfe vorzutäuschen.

Das ist für ein Motion-Graphics-Video. Nutze für die schnelle Bewegung in [Szene] einen „Smear Frame“ (auch smear oder elongated in-between genannt): Dehne das Motiv nur für einen oder zwei Frames in der Mitte der Bewegung entlang seiner Bahn, sodass es die Lücke zwischen den beiden Positionen überbrückt.
Die Form selbst wird neu gezeichnet – gedehnt, als Multiples wiederholt oder von Bewegungslinien begleitet –, statt so zu verwischen, wie eine Kamera sie verwischen würde, und die Frames davor und danach bleiben scharf und unverzerrt.
Halte die ganze Bewegung innerhalb von [Dauer] und sehr schnell, damit der Smear als Tempo gespürt und nicht als Form bemerkt wird.

Physikbasierte Bewegung, die über das Ziel hinausschießt und darum schwingt, bevor sie ruht; das Verhalten ergibt sich aus Steifigkeit, Dämpfung und Masse statt aus einer festen Kurve.

Das ist für ein Motion-Graphics-Video. Treibe die Bewegung in [Szene] mit einem „Spring“ (auch spring animation oder damped spring genannt) an: Eine simulierte Feder zieht das Objekt zu seinem Ziel, sodass es aus der Ruhe Fahrt aufnimmt, über das Ziel hinausläuft und darum schwingt, bevor es ruht.
Die Bewegung soll sich aus Steifigkeit, Dämpfung und Masse ergeben statt aus einer festen Kurve – senke die Dämpfung für mehr Schwingungen, oder erhöhe sie, bis das Objekt ganz ohne Overshoot zur Ruhe kommt.
Lass es innerhalb von [Dauer] zur Ruhe kommen, und nutze für jedes Element dieselben Spring-Einstellungen, damit sie wie ein einziges Material wirken.

Das Objekt staucht und dehnt sich und behält dabei sein Volumen, was Gewicht und Elastizität vermittelt.

Das ist für ein Motion-Graphics-Video. Animiere [Szene] mit „Squash and Stretch“: Das Objekt wird flach, wenn es landet oder getroffen wird, und dehnt sich entlang seiner Bewegungsrichtung, solange es sich schnell bewegt.
Halte sein Volumen konstant – wird es breiter, muss es kürzer werden, und umgekehrt – und kopple jede Formänderung an die Bewegung, damit sie als Gewicht und Elastizität wirkt und nicht als Gummiband-Wackeln auf der Stelle.
Bring die Aktion in [Dauer] unter, und verforme das Objekt stark bei etwas Weichem und nur leicht bei etwas Steifem.

Der Wert springt in einzelnen Stufen (oder einmal, bei einem Hold), statt sich weich zu bewegen; ein Hold ist ein einziger augenblicklicher Sprung, nach dem der Wert stehen bleibt.

Das ist für ein Motion-Graphics-Video. Animiere die Änderung in [Szene] mit „Steps“ (auch stepped ease oder hold keyframes genannt): Der Wert springt in wenigen einzelnen Stufen von einer Position zur nächsten und steht dazwischen still, ohne weiche Zwischenbewegung.
Für einen Hold machst du daraus einen einzigen Sprung – das Objekt bleibt stehen, springt in einem Augenblick auf den neuen Wert und bleibt dort. Es sind wenige gezielte Sprünge, nicht das feine Ruckeln von Frame zu Frame wie bei Animating on Twos.
Verteile die Sprünge gleichmäßig über [Dauer].

Kleine zufällige Versätze mit fester Frequenz und Amplitude lassen das Objekt unregelmäßig zittern oder driften, statt einer gestalteten Bahn zu folgen.

Das ist für ein Motion-Graphics-Video. Gib dem Element in [Szene] einen „Wiggle“ (auch jitter oder random shake genannt): Es weicht ständig um kleine zufällige Beträge von seinem Platz ab, in gleichbleibendem Takt und innerhalb eines gleichbleibenden Bereichs.
Die Versätze müssen unregelmäßig sein – ein gleichmäßiges Hin-und-her-Schwingen ist ein Shake, kein Wiggle –, und nur dieses Element bewegt sich, nicht das ganze Bild wie bei einer Handkamera.
Lass es [Dauer] lang laufen, mit dem Wiggle auf der Position – oder stattdessen auf Rotation oder Skalierung, wenn das besser zum Element passt.