Was sind Keyframes in der Animation?

Keyframes in der Animation sind keine Funktion, sondern eine Notation: ein Wert, ein Zeitpunkt und die Regel, wie es dazwischen weitergeht. Wer diese drei Teile auseinanderhalten kann, liest jede Timeline anders und findet Fehler, die sonst wie Geschmacksfragen aussehen.

Der Begriff wird dabei oft mit dem Werkzeug verwechselt, das ihn verwaltet. Ein Keyframe selbst ist nur ein Eintrag. Interessant wird er durch die Frage, wer die Werte dazwischen berechnet — und nach welcher Regel.

Kurzdefinition

Ein Keyframe hält einen Eigenschaftswert zu einem Zeitpunkt fest. Die Software berechnet die Werte zwischen zwei Keyframes selbst, deshalb sind zwei Keyframes das Minimum für jede Bewegung. Ein einzelner Keyframe bewegt nichts, er markiert nur einen Zustand.

Wert, Zeit, Interpolation

Drei Zutaten, die immer zusammenspielen.

Der Wert kann eine Zahl sein, ein Winkel, eine Farbe oder ein Pfadpunkt. Bei einer Position sind es zwei oder drei Zahlen, bei einer Farbe vier Kanäle, bei einem Pfad die Koordinaten aller Ankerpunkte.

Die Zeit steht in Frames, nicht in Sekunden. Bei 30 fps ist Frame 30 eine Sekunde, bei 25 fps sind es 1,2 s. Dieselben Keyframe-Nummern ergeben in zwei Projekten also unterschiedliche Timings.

Die Interpolation entscheidet, was zwischen den beiden Einträgen passiert. Linear verteilt den Weg gleichmäßig. Easing beschleunigt und bremst nach einer Kurve. Ein Hold lässt den Wert stehen und springt erst am nächsten Keyframe.

Rechnen mit Keyframes

Die Arithmetik ist unspektakulär, erklärt aber fast jeden Effekt, der Anfängern wie Magie vorkommt.

Ein Wert steigt von 0 auf 100 über 2 s. Linear gilt für jeden Zeitpunkt 0 + (100 − 0) × (t ÷ 2). Bei 1 s ergibt das 50, bei 1,5 s ergibt das 75. Der Weg ist in jeder Viertelsekunde gleich groß.

Bei 24 fps dauert ein Hold von zwei Frames 2 ÷ 24 = 0,083 s. Das ist kurz genug, um als Ruckeln gelesen zu werden, und lang genug, um es zu sehen.

Drei Keyframes ergeben zwei Abschnitte. Der erste kann schnell laufen, der zweite langsam, und die Durchschnittsgeschwindigkeit über beide sagt nichts über den Verlauf aus. Genau deshalb prüft man Bewegung im Kontext und nicht als Zahlenreihe.

Easing ist die Form der Verbindung

Easing ist eine Zeitfunktion, üblicherweise eine kubische Bézier-Kurve, die festlegt, wie der Wert zwischen zwei Keyframes verteilt wird. Linear ist der Standard in den meisten Werkzeugen und sieht mechanisch aus, weil echte Bewegung nie mit konstanter Geschwindigkeit startet und stoppt.

In einer Lottie-Datei wird diese Kurve als Zahlenwerte für Ein- und Ausgang gespeichert, nicht als Adjektiv. „Weich” ist eine Beschreibung, kein Wert. Wie diese Einträge aufgebaut sind, zeigt Was ist eine Lottie-Datei und wie funktioniert sie?.

Wo das Modell endet

Der häufigste Irrtum lautet, mehr Keyframes ergäben eine weichere Bewegung. Die Interpolation ist zwischen zwei Keyframes bereits stetig. Zusätzliche Keyframes schaffen nur weitere Stellen, an denen die Kurve ihre Richtung ändern kann — mehr Ecken, nicht mehr Weichheit.

Der zweite Irrtum betrifft das Objekt. Keyframes animieren Eigenschaften, nicht Ebenen. Eine Ebene ist nur der Behälter für Position, Skalierung, Rotation, Deckkraft und Effekte. Wer die „Ebene” animieren will, muss wissen, welche Eigenschaft gemeint ist.

Der dritte betrifft die Werkzeuge. Die Easing-Mathematik ist dieselbe wie in CSS-Angaben mit kubischen Bézier-Kurven, das Zeitmodell ist es nicht. Eine Komposition und eine CSS-Animation beschreiben Bewegung auf zwei verschiedene Arten, und der eine Entwurf lässt sich nicht einfach in den anderen hinüberretten.

Dazu kommt ein Sonderfall, der Keyframes teilweise ersetzt. Expressions berechnen einen Wert aus einer Formel, sodass eine Bewegung ohne zweiten Keyframe entsteht. Das ist praktisch für Rotationen, Pendel oder Zähler, macht aber die Zeitachse weniger lesbar, weil die Bewegung nicht mehr aus Einträgen besteht.

Im Motion-Graphics- und VFX-Editor gehören Keyframes, Kurveneditor und Expressions zum selben Werkzeugsatz. Wie daraus ein vollständiger Ablauf wird, beschreibt Motion Graphics online mit Keyframes erstellen.

Ein Keyframe ist damit weniger ein Gestaltungswerkzeug als eine Vereinbarung über Zeit. Wer sie beherrscht, kann jede Bewegung nachträglich ändern, weil der Zustand an jedem Ende der Strecke festgehalten ist.