Keyframe-Animation: Definition, Methoden und Grundlagen.

Egal, ob es sich um einfache Animationen eines hüpfenden Balls handelt oder aufeändige Animationen von Figuren oder Hintergründen – Keyframes, auch Schlüsselbilder genannt, sind ein zentrales Element in der Animationstechnik. Sie geben die Struktur einer Bewegung vor und sorgen dafür, dass eine Illusion von Bewegung entsteht. In diesem Artikel erklären wir die Grundlagen der Keyframe-Animation und zeigen dir, was du brauchst, um sie selbst anzuwenden.

Darstellung einer Animation der Keyframes hinzugefügt werden.

Was dich erwartet:

Was sind Keyframes?

Der Begriff Keyframe, auch Schlüsselbild genannt, kommt aus der Animationstechnik und umfasst unterschiedliche Bereiche in der digitalen Videoproduktion und Datenkompression. In der Animation definiert ein Keyframe ein einzelnes Bild, das den Start- bzw. Endpunkt einer Bewegung markiert. Es dient somit als Vorlage für die dazwischenliegenden Bilder, die so genannten "Inbetweens“. Während in der klassischen Animation noch eine Reihe von meist gezeichneten Einzelbildern zwischen den Keyframes nötig waren, um die Illusion von Bewegung zu erzeugen, erstellen Software-Programme wie Adobe After Effects diese Zwischenbilder inzwischen automatisiert. Diesen Prozess, bei dem Datenlücken zwischen zwei Keyframes gefüllt werden, nennt man auch Interpolation oder Tweening.


In der Videokompression definieren Keyframes (in diesem Bereich auch Intraframes genannt) Einzelbilder, die im Gegensatz zu umliegenden Bildern vollständig kodiert sind. Folgebilder enthalten dabei nicht mehr die gesamte Datenmenge, sondern nur noch die Veränderungen. Keyframes bilden in diesem Fall die Eckpunkte für die Kompression von Datenmengen und machen damit schnelles Streaming für Online-Plattformen wie Netflix oder Disney+ erst möglich.

Darstellung verschiedener Entwicklungsstufen einer Seifenblase in einer Animation.
In der Animation stellt ein Keyframe den Anfangs- bzw. Endpunkt einer Bewegung dar. Sie stellen die Vorlage für die dazwischenliegenden Bilder dar.

Einsatzgebiete von Keyframes.

Egal, ob es sich um eine klassische Animation mit gezeichneten Einzelbildern oder digitale Computeranimation mit einer Software handelt – Keyframes sind nicht nur bei der Animation, sondern auch bei Effekten wie Motion Graphics oder der Kompression großer Datenmengen im Bewegtbild unverzichtbar. Wir wollen hier etwas näher auf die verschiedenen Keyframe-Arten eingehen:

Keyframes in der klassischen Animation.

In den frühen Tagen der Animationstechnik musste jeder einzelne Frame von Hand gezeichnet werden. Um in Zeichentrickfilmen eine Illusion von Bewegung zu erzeugen, waren mehrere Zeichnungen als Einzelbilder aneinandergereiht nötig. Um eine Figur in Aktion treten zu lassen, mussten Zeichner*innen Bild für Bild im Detail ausarbeiten. Eine Prozedur, die sehr viel Aufwand und hohe Kosten bedeutete.

 

Um diesen Prozess effizienter zu gestalten, hat man die Rolle des Hauptzeichners geschaffen. Dieser war ausschließlich für die wichtigsten Bilder – Keyframes – verantwortlich und gab für eine Bewegung das erste sowie das letzte Bild einer Einstellung vor. Zwischen den einzelnen Keyframes kamen andere Zeichner*innen (Zwischenzeichner oder Inbetweener) zum Einsatz, die so viele Bilder zeichneten, bis ein flüssiges Bild entstand. Damit ein Film realistisch und die Übergänge der Keyframes zu den Inbetweens fließend ist, benötigt ein Keyframe Artist viel Erfahrung und nimmt eine Schlüsselrolle in der Produktion von Animationsfilmen ein.

Zeichner skizziert verschiedene Ansichten eines Roboters.
Hatten eine Schlüsselrolle in der klassischen Animation: die Hauptzeichner*innen, so genannte Keyframe Artists.

Keyframes in der digitalen Animation.

Wurden Keyframes in der analogen Animation noch von Hand gezeichnet, unterstützen inzwischen spezielle Animationsprogramme wie After Effects oder Adobe Animate bei der Erstellung von Keyframes. Der Keyframe definiert Aussehen des Objekts und nach wie vor Start- und Endpunkt einer Bewegung. Bei der Animation eines Arms etwa definieren die Keyframes also, wie er aussieht und legen die Anfangs- und die Endposition fest. Die Animations-Software errechnet anhand der beiden Positionen, was dazwischen – den so genannten Interframes – passiert.

Keyframes in der Medienproduktion.

Der Begriff des Keyframes beschränkt sich nicht nur auf die Animation von Zeichnungen und virtuellen Figuren, sondern kommt auch bei der Medienproduktion für die Bild- oder Tonbearbeitung vielfältig zum Einsatz. In diesem Fall definiert der Keyframe die Position auf einer Timeline, die Beginn und Ende einer Aktion absteckt. Bei der Bildbearbeitung beispielsweise können Keyframes für die Verschiebung von Schärfeebenen, Licht oder Bildübergänge eingesetzt werden. Möchte ein*e Animator*in bei einer 3D-Animation hingegen die Intensität des Lichts in einem bestimmten Zeitraum ändern, kommen auch hier Keyframes zum Einsatz. Auch bei Audioaufnahmen werden Start- und Endmarken gesetzt, die sich Keyframes nennen. Das Einsatzgebiet von Keyframes beschränkt sich also nicht nur auf die Animationstechnik.

Keyframes in der Kompression von Daten.

Videostreaming wie wir es heute kennen, wäre ohne Keyframes nicht möglich. Für ein schnelles Streaming kommen nur geringe Dateigrößen in Frage. Bei der Videokompression dienen Keyframes als Anfangs- und Endpunkte für Veränderungen eines Signals. Die Keyframes, hier auch Intraframes genannt, liegen als Einzelbild vollständig vor. Bei der Videokompression werden im Datenstrom nur Änderung gespeichert, die von einem Intraframe zum nächsten Frame auftreten, geringe Veränderungen werden nicht übernommen. Das verringert die zu speichernde Datenmenge immens. Damit ein schneller Vor- oder Rücklauf zu einer beliebigen Stelle des Films möglich ist, werden regelmäßig Intraframes eingebaut, auch wenn sie das Videobild optisch nicht verändert.

Illustration eines Animators, der am Computer eine Animation in Bewegung bringt.
Keyframes kommen auch bei der Kompression von Videos zum Einsatz und ermöglichen so schnelles Streaming.

Grundlagen der Schlüsselbildanimation.

Du weißt nun, was es mit dem Begriff des Keyframings auf sich hat und wo Keyframes eingesetzt werden. Doch bevor wir näher auf die Anwendung von Keyframes in Animationsprogrammen wie After Effects, Animate oder Adobe Character Animator eingehen, wollen wir einige Begriffe erklären, die beim Keyframing eine Rolle spielen. Inzwischen wissen wir: Um beispielsweise einen hüpfenden Ball zu animieren, benötigt es jeweils einen Keyframe, der den Start- und einen weiteren Keyframe, der den Endpunkt markiert.

 

Bei der digitalen Animation "füllt“ die Animationssoftware die Datenlücke zwischen den beiden definierten Keyframes automatisch. Diese Lücke bezeichnet man auch als Interpolation. In After Effects oder Animate kannst du zwischen verschiedenen Interpolationsmethoden wählen, mit denen du bestimmen kannst, wie eine Bewegung ausgeführt wird. Im Folgenden wollen wir etwas näher auf die verschiedenen Methoden eingehen:

  • Lineare Interpolation: Bei dieser Interpolationsmethode wird ein gleichmäßiger Änderungsgrad zwischen den Keyframes erreicht. Wird der letzte Keyframe erreicht, endet der Bewegungsablauf abrupt. Dadurch erhält die Animation eher ein mechanisches Aussehen.

  • Unterdrückte Interpolation: Diese Methode setzt am nächsten Keyframe abrupt ein und wird gerne für Stroboskoplichteffekte eingesetzt oder wenn Ebenen plötzlich erscheinen oder verschwinden sollen.

  • Bézier Interpolation: Diese Änderung basiert auf einer Bewegungskurve, die du manuell anpassen kannst, sie bietet daher die präziseste Steuerungsmöglichkeit.
Die leuchtenden Logos von Adobe Animate und Adobe After Effects auf schwarzem Hintergrund.
Adobe Animate und Adobe After Effects sind bestens dafür geeignet, Animationen mithilfe von Keyframes zu erstellen.

Mit welchen Programmen kann ich Keyframing anwenden?

Neugierig geworden? Egal, ob du dich an Animationseffekten, Motion Graphics oder der Gestaltung einer 2D-Figur versuchen möchtest – je nachdem, was genau du vorhast, stehen dir mit After Effects, Animate und Character Animator verschiedene Optionen zu Verfügung, in denen du Animationen mithilfe von Keyframes erstellen kannst.

 

Keyframes in After Effects erstellen.

Während Programme wie Animate oder Character Animator ausschließlich für Animationen gedacht sind, kannst du mit After Effects Kompositionen aus animierten Elementen und realen Videoclips erstellen. Im Folgenden zeigen wir dir in einer Schritt-für-Schritt-Anleitung, wie du in After Effects eine Grafik mit Keyframes versiehst:

  1. Wähle die Ebene aus, die du animieren willst. Klicke auf den Pfeil neben "Transformieren“, um die Parameter für diese Ebene einzublenden.

  2. Wähle den gewünschten Parameter, der festlegt wie die Ebene transformiert wird.

  3. Verschiebe den Abspielknopf (die blaue Marke, die deine Position auf der Zeitleiste angibt) an die Stelle, an der du einen Keyframe setzen möchtest. Platziere die Grafik an der gewünschten Anfangsposition bzw. lege den Anfangswert des Parameters fest.

  4. Klicke auf die Stoppuhr neben dem Parameter, um den ersten Keyframe zu setzen.

  5. Verschiebe den Abspielkopf auf der Zeitleiste an die Stelle, an der die Aktion beendet werden soll. Platziere deine Grafik dann an der gewünschten Endposition bzw. lege den Endwert des Parameters fest. Der Keyframe wird automatisch gesetzt.

  6. Um die Interpolationsmethode zu ändern, mache einen Rechtsklick bzw. Ctrl-Klick auf einen Keyframe, klicke auf "Keyframe-Assistenten“, und wähle die gewünschte Methode.

  7. Um einen Keyframe zu kopieren – zum Beispiel, wenn du Zwischen-Frames hinzufügen willst, die die Aktion aus einem früheren Frame nachahmen sollen –, wähle den Keyframe mit dem Lasso-Werkzeug aus. Kopiere ihn und füge den duplizierten Keyframe an der gewünschten Stelle auf der Zeitleiste ein.

Animationen faszinieren dich?

Lies unseren Leitfaden für Einsteiger in die Animation.

Keyframes in Animate erstellen.

Du möchtest einen 2D-Clip für das Web oder ein Spiel animieren? Dann ist Animate das passende Programm für dich. Genau wie in After Effects sind Keyframes in Animate ein grundlegendes Werkzeug der Animation. Die Animation in Animate basiert auf so genannten Tweens. Das heißt, ein Objekt wird in den Frames zwischen den beiden Keyframes animiert. Dabei werden Keyframes rechteckig dargestellt und nicht rautenförmig wie in After Effects oder Character Animator. Bevor du mit der konkreten Umsetzung startest, solltest du dich zunächst mit den Basics zur Funktionsweise von Keyframes in Animate vertraut machen. In unseren Animate-Tutorials zeigen wir dir, wie du Keyframes erstellst und mit Tweens arbeitest. Du findest dort aber noch viele weitere Videos, mit denen du die Grundlagen der Animation lernen kannst.

Screenshot: Bearbeiten und Hinzufügen von Keyframes in Adobe Animate.
Bei Adobe Animate werden Animationen basierend auf Tweens erstellt. Objekte und Figuren werden dabei in den Frames zwischen den beiden Keyframes animiert.

Keyframes in Character Animator.

Möchtest du eine Figur zum Leben erwecken, ist Character Animator das richtige Programm für dich. Character Animator nutzt dafür Technologie für Bewegungs-Tracking. Du kannst mit einer Computerkamera deine Bewegungen und deine Mimik erfassen und auf eine 2D-Figur übertragen. Wenn du möchtest, kannst du deinem Bewegungs-Tracking Keyframes hinzufügen, um die Bewegungen zu verfeinern oder bestimmte Bewegungen zu erzielen, die sich mit dem Bewegungs-Tracking nur schwer realisieren lassen. Alles, was du über die Anwendung, Einrichtung und Verschiebung von Keyframes in Character Animator wissen musst, zeigen wir dir in unserem Hilfebereich.

Arbeit mit Keyframes in Adobe Character Animator.
In Adobe Character Animator kannst du eigene Bewegungen und Mimik mit einer Webcam einfangen und sie auf deine virtuellen Figuren übertragen.

Häufig gestellte Fragen.

Kann ich Keyframes auch in anderen Programmen von Adobe verwenden?

Ja. Keyframing ist in vielen verschiedenen Adobe Programmen möglich. Keyframes kommen auch zum Einsatz, wenn du Videomaterial in Adobe Premiere Pro bearbeitest, wenn du Animationen über die Timeline von Adobe Photoshop erstellst und wenn du Audiodateien bearbeitest. Adobe macht es dir leicht, verschiedene Arten von Keyframes anzuwenden und jede Bewegung oder Änderung ganz nach Bedarf anzupassen, auch über die einzelnen Programme hinweg. Du kannst deine Keyframing-Kenntnisse in allen Creative Cloud-Programmen nutzen.

Wofür kann ich Keyframes in Premiere Pro nutzen?

In Premiere Pro können Effekteigenschaften animiert werden, indem du ihnen Keyframes zuweist. Ein Keyframe markiert in Premiere Pro den Zeitpunkt, an dem du einen Wert angibst wie eine räumliche Position, die Deckkraft oder die Audio-Lautstärke. Um eine Änderung einer Eigenschaft über die Zeit zu erstellen, benötigst du mindestens zwei Keyframes. Du kannst Keyframes hinzufügen, bearbeiten und löschen und sie dir sowohl im Effekteinstellungsfenster als auch über das Schnittfenster anzeigen lassen.

Erstelle Animationen mit den Apps deiner Wahl.

Adobe After Effects im Einzelprodukt-Abo

Nutze Templates für Motion Graphics und Special Effects und animiere Logos, Figuren und Texte oder designe in 3D. 7 Tage kostenlos, danach 23,79 €/Monat pro Monat.

Animate im Einzelprodukt-Abo.

Erschaffe interaktive Animationen wie Cartoons, Banner und Avatare für Spiele, TV und Websites. 7 Tage kostenlos, danach  23,79 €/Monat.

CC

Creative Cloud (Alle Applikationen).

Hole dir alle Kreativprogramme, Mobile Apps, Vorlagen, Tutorials und mehr in einem Paket. 7 Tage kostenlos, danach  61,95 €/Monat.

Das könnte dich auch interessieren:

Animation: Alle Infos im Überblick.

Animation: Alle Infos im Überblick.

Erfahre, welche Animationsarten es gibt und wie du selbst Animationen erstellen kannst.

Was ist Cel-Animation?

Was ist Cel-Animation?

Erfahre, welche Animationsarten es gibt und wie du selbst Animationen erstellen kannst.

CGI Animation aus einer anderen Welt.

CGI: Animation aus einer anderen Welt.

Erfahre, wie sich CGI von klassischer Animation unterscheidet und wie du CGI-Animationen selbst erstellst.

Eine Einführung in die Stop-Motion-Animation.

Eine Einführung in die Stop-Motion-Animation.

Finde heraus, wie du mithilfe von Stop-Motion bewegte Bilder und Animationen erstellen kannst.