Animation bezeichnet die Technik. Durch eine schnelle Abfolge einzelner Bilder oder durch die kontinuierliche Veränderung von Werten den Eindruck von Bewegung zu erzeugen. Das Prinzip reicht von klassischen Zeichentrickfilmen über computeranimierte 3D-Welten. Bis hin zu kleinen Bewegungseffekten auf Webseiten, etwa wenn ein Button beim Hovern seine Form verändert. Wer verstehen möchte, wie Animation grundsätzlich funktioniert, welche Techniken es gibt und wo sie heute überall zum Einsatz kommt. Bekommt hier einen klaren Überblick.
Wie funktioniert Animation grundsätzlich?
Das menschliche Auge nimmt eine schnelle Abfolge leicht unterschiedlicher Bilder als fließende Bewegung wahr, sobald eine bestimmte Bildrate überschritten wird. Dieses Prinzip, oft als Bildwechselfrequenz bezeichnet, liegt sowohl klassischen Zeichentrickfilmen als auch modernen digitalen Animationen zugrunde.
Bei digitalen Animationen wird diese Bewegung entweder durch tatsächlich einzeln erstellte Bilder erzeugt. Sogenannte Frame-für-Frame-Animation, oder durch Software berechnet, die zwischen einem Anfangs- und einem Endzustand automatisch überblendet. Letzteres wird häufig als Tweening bezeichnet und ist die Grundlage vieler moderner Animationswerkzeuge.
Klassische Animationstechniken
Bei der 2D-Animation werden Figuren und Objekte zweidimensional gezeichnet oder digital erstellt und über einzelne Frames bewegt. Diese Technik wird seit Jahrzehnten im klassischen Zeichentrick eingesetzt und findet sich. Heute ebenso in modernen digitalen Illustrationen und Erklärvideos wieder.
Die 3D-Animation arbeitet dagegen mit dreidimensionalen Modellen. Die in einer virtuellen Umgebung mit sogenannten Skeletten und Steuerpunkten versehen und anschließend bewegt werden. Diese Technik kommt vor allem in Filmen, Videospielen und Produktvisualisierungen zum Einsatz, da sie realistische Bewegungen und Perspektiven ermöglicht.
Bei der Stop-Motion-Animation werden reale, physische Objekte oder Figuren Schritt für Schritt minimal verändert und dabei jeweils fotografiert. Die einzelnen Fotos ergeben anschließend, schnell hintereinander abgespielt, eine fließende Bewegung. Diese aufwendige, aber sehr charakteristische Technik wird bis heute für bestimmte Filme und künstlerische Projekte genutzt.
Animation im Web: GIF, CSS und SVG
Im Webdesign spielt Animation eine besondere Rolle, da sie Aufmerksamkeit lenkt, Vorgänge erklärt und die Bedienung intuitiver macht. Eine der ältesten Formen ist das animierte GIF, bei dem mehrere Einzelbilder in einer einzigen Datei gespeichert und automatisch in einer Schleife abgespielt werden. GIFs sind einfach einzubinden, erzeugen bei aufwendigen Animationen aber vergleichsweise große Dateien.
Moderne Webseiten setzen zunehmend auf CSS-Animationen, bei denen Bewegungen direkt im Code definiert werden, etwa das sanfte Einblenden eines Elements oder die Veränderung von Farbe und Größe beim Hovern. Da CSS-Animationen vom Browser direkt berechnet werden, sind sie in der Regel deutlich performanter als klassische Videoanimationen.
Auch SVG-Grafiken lassen sich animieren, entweder über CSS oder über JavaScript, wodurch sich beispielsweise Icons, Diagramme oder Illustrationen dynamisch verändern lassen, ohne dass dafür ein zusätzliches Video eingebunden werden muss. Diese Kombination aus Vektorgrafik und Animation ist besonders ressourcenschonend und wird häufig für Logos, Ladeanimationen und interaktive Elemente genutzt.
Software und Werkzeuge für Animation
Für klassische 2D-Animationen kommen Programme wie Adobe Animate oder spezialisierte Zeichentrick-Software zum Einsatz, während für 3D-Animationen Programme wie Blender, Cinema 4D oder Maya verbreitet sind. Im Webbereich reichen für einfache Animationen oft schon CSS-Kenntnisse aus, während komplexere interaktive Animationen häufig mit JavaScript-Bibliotheken umgesetzt werden.
Für Motion-Design, also die Gestaltung bewegter Grafiken für Videos, Erklärfilme oder Social-Media-Inhalte, hat sich insbesondere Adobe After Effects als weit verbreitetes Werkzeug etabliert.
Einsatzbereiche von Animation
Animation begegnet Nutzern heute in nahezu jedem digitalen Bereich: in Filmen und Serien, in Videospielen, in Werbe- und Erklärvideos, in mobilen Apps sowie auf Webseiten, wo kleine Animationen die Nutzerführung verbessern und Vorgänge wie Ladezeiten oder Statusänderungen anschaulich machen. Auch in der Produktvisualisierung, etwa bei technischen Erklärungen oder Architekturvisualisierungen, wird zunehmend auf Animation gesetzt, um komplexe Zusammenhänge verständlicher darzustellen als mit statischen Bildern.
Fazit
Animation basiert auf dem einfachen Prinzip, durch eine Abfolge von Bildern oder durch die stetige Veränderung von Werten Bewegung erlebbar zu machen, wird technisch aber sehr unterschiedlich umgesetzt, von klassischer Zeichentrick- und Stop-Motion-Technik über 3D-Animation bis hin zu modernen Web-Animationen mit CSS und SVG. Wer selbst Animationen einsetzen möchte, sollte sich zunächst am Einsatzzweck orientieren, denn für ein einfaches Interface-Detail eignet sich CSS oft besser als eine aufwendige 3D-Produktion.
