Motion Graphics online mit Keyframes erstellen

Motion Graphics online mit Keyframes erstellen ist ein Ablauf aus vier Handgriffen. Eine Eigenschaft auswählen, zwei Werte auf die Zeitachse setzen, den Verlauf dazwischen formen, ausgeben. Masken, Formebenen, Textanimatoren und 3D-Kameras bauen später auf demselben Muster auf.

Wer den Ablauf einmal sauber durchläuft, merkt, wo die Zeit verloren geht. Nicht beim Setzen der Keyframes, sondern bei der Frage, was sich bewegen soll und wie lange das dauern darf. Der Motion-Graphics- und VFX-Editor arbeitet mit denselben Bausteinen wie jede große Compositing-Software, nur in einem Browser-Tab.

Kurzantwort

Ein Keyframe speichert einen Wert zu einem Zeitpunkt, alles dazwischen wird interpoliert. Zwei Keyframes sind das Minimum für Bewegung, ein dritter wird erst nötig, wenn die Bewegung ihre Richtung oder ihre Geschwindigkeit ändert. Der Gestaltungshebel liegt deshalb nicht in der Anzahl der Keyframes, sondern in der Kurve dazwischen.

Was du vor dem Start brauchst

Vier Entscheidungen vor dem ersten Keyframe sparen jede Menge Nacharbeit.

• Kompositionsgröße. 1920 × 1080 für 16:9, 1080 × 1080 für quadratische Formate, 1080 × 1920 für vertikale. Die Größe legt fest, welche Distanzen in Pixeln sinnvoll sind.
• Bildrate. Eine Zwei-Sekunden-Bewegung hat bei 30 fps 60 Frames, bei 24 fps nur 48. Keyframes liegen auf Frames, nicht auf Sekunden.
• Dauer. Lieber knapp ansetzen. Eine Bewegung über 0,4 s liest sich meist klarer als dieselbe über 1,2 s.
• Zielformat. Gerendertes Video läuft über die Render Queue, eine UI-Animation über Lottie. Die Wahl entscheidet, wie komplex die Szene werden darf.

Der Ablauf in vier Schritten

Keyframes hängen an Eigenschaften, nicht an Ebenen. Du animierst nicht die Ebene, du animierst ihre Position, ihre Skalierung, ihren Rotationswinkel, ihre Deckkraft oder einen Effektparameter.

1. Die richtige Eigenschaft finden. Im Eigenschaften-Panel die Eigenschaft öffnen, die sich ändern soll.
2. Startwert setzen. Playhead auf das Startframe, Keyframe-Funktion der Eigenschaft aktivieren, Ausgangswert eintragen.
3. Endwert setzen. Playhead ans Endframe, neuen Wert eintragen, zweiten Keyframe anlegen.
4. Prüfen und formen. Abspielen, Bewegung ansehen, dann die Kurve im Kurveneditor bearbeiten.

Ein Rechenbeispiel zeigt die Skala. Eine Ebene wandert von x = 0 bei 0 s nach x = 800 bei 2 s. Linear steht sie bei 1 s auf 400 und bei 0,5 s auf 200. Diese Gleichverteilung ist der Grund, warum lineare Bewegung mechanisch wirkt: In der ersten halben Sekunde passiert ein Viertel des Wegs, und das Auge erwartet am Anfang mehr.

Easing ist die eigentliche Arbeit

Easing ist eine Zeitfunktion, meist eine kubische Bézier-Kurve, die den Wert zwischen zwei Keyframes nicht gleichmäßig verteilt, sondern beschleunigt oder abbremst. Der Kurveneditor macht aus dieser Formel eine Kurve mit zwei Griffen.

Drei Muster decken die meisten Fälle ab. Ein Element, das hereinkommt, startet schnell und bremst am Ende ab. Ein Element, das hinausgeht, startet langsam und beschleunigt. Ein Element, das einen Zustand halten soll, bekommt einen Hold-Keyframe, damit dazwischen nichts schleicht.

Was du nicht brauchst, ist ein Keyframe pro Frame. Wer im Abstand von 15 Frames Einträge setzt, hat bei 30 fps alle halbe Sekunde einen Keyframe, in einer Zwei-Sekunden-Bewegung also vier — und später niemanden mehr, der die Kurve noch durchblickt. Setze Keyframes dort, wo sich etwas ändert, nicht dort, wo die Zeit vergeht. Definition und Zeitrechnung stehen in Was sind Keyframes in der Animation?.

Typische Fehler

Der häufigste ist die lineare Voreinstellung. Die ist nicht falsch, nur die langweiligste Antwort auf die Frage, wie sich etwas bewegen soll.

Der zweite ist der Ankerpunkt. Skalierung und Rotation drehen um den Ankerpunkt einer Ebene. Liegt er in der linken oberen Ecke statt in der Mitte, dreht sich das Element um eine Ecke, und die Keyframes sind nicht schuld.

Der dritte ist das Kopieren von Timings zwischen Projekten mit unterschiedlicher Bildrate. Ein Versatz von 15 Frames ist bei 30 fps eine halbe Sekunde und bei 60 fps eine Viertelsekunde. Wer die Zahl übernimmt, ohne die Bildrate zu prüfen, baut eine andere Bewegung.

Der vierte ist zu früher Aufwand. Eine Bewegung aus Position und Deckkraft lässt sich in zwei Minuten korrigieren. Eine Bewegung mit Masken, 3D-Kameras und Expressions lässt sich nur noch neu bauen.

Ausgabe: Render Queue oder Lottie

Der Editor hat eine Render Queue, und Lottie lässt sich importieren und exportieren. Das sind zwei verschiedene Ziele, nicht zwei Varianten desselben Exports.

Die Render Queue führt Ausgabeoptionen auf. Lies die Liste dort, bevor du eine lange Komposition startest, und rendere ein kurzes Stück vorab. Die fertige Datei ist die Prüfung, nicht die Liste.

Lottie ist der Weg in Web und App. Dort zählt keine Bitrate, sondern Vektorgeometrie. Welches Ausgabeformat zu deinem Projekt passt, klärt Lottie vs. GIF vs. MP4 im Detail.

Ein Punkt zur Transparenz. Wenn dein Projekt auf transparentem Hintergrund liegt, ist die Formatwahl keine Fußnote, sondern eine Vorentscheidung — H.264 in MP4 kennt keinen portablen Alphakanal.

Vier Handgriffe, eine Kurve, ein Zielformat. Wer in dieser Reihenfolge arbeitet, kann jede Bewegung nachträglich ändern, ohne die Komposition neu zu bauen.