Lesezeit: 5 Minuten
Animationstechniken im Vergleich
Vektoranimationen leichtgewichtig, skalierbar und interaktiv in die eigene Webseite oder App integrieren? Das geht auf verschiedenen Wegen – wie unsere Übersicht zeigt.
Es gibt viele gute Gründe, warum man Animationen in Webseiten integrieren möchte. Wir haben in der Vergangenheit bereits einige beleuchtet: Animation im UX-Design, Webanimation im B2B, SVG sei Dank: mehr Schub für die Teasergestaltung.
Techniken um Webanimationen zu realisieren, gibt es mindestens genauso viele. Deshalb hat unsere Übersicht auch keinen Anspruch auf Vollständigkeit.
Vielmehr konzentrieren wir uns hier auf Methoden, die es erlauben, grafische Vektoranimationen in Webseiten oder Apps zu integrieren. Und das möglichst leichtgewichtig und interaktiv. Vektoranimationen können nämlich besonders praktische Helfer im UX-Design sein.
Z. B. lassen sich so Interface-Elemente wie Burger-Menüs, Bewertungssterne oder Ladebalken lebhaft animieren. Vorstellbar sind auch dynamische Infografiken wie Balkendiagramme, die zwischen Zuständen dynamisch wechseln und so Veränderungen anschaulich visualisieren. Oder Vektoranimationen werden genutzt, um Illustrationen Leben einzuhauchen. Z. B. über eine Scroll-Steuerung.
Im Hinblick auf diese Anforderungen stellen wir im Folgenden verschiedene Techniken für die Realisierung vor. Und das mit unserem (subjektiven) Blick auf deren Vor- und Nachteile.
1. Gif-Animation
GIF-Animationen gibt es schon seit den Anfangstagen des World Wide Web und sind bis heute sehr beliebt. Ohne jegliche Programmierkenntnisse lassen sich GIF-Animationen in Bildbearbeitungsprogrammen wie z. B. Photoshop erstellen und exportieren. Die Einbindung in Webseiten ist problemlos und erfolgt wie bei JPGs oder anderen Bildformaten auch.
Giphy bietet GIF-Animationen zu verschiedensten Themen zum Download an. Auch lassen sich dort eigene Animationen erstellen und exportieren.
Vorteile:
- Einfach in Bildbearbeitungsprogrammen umsetzbar
- Problemlose Einbindung in Webseiten
Nachteile:
- Nicht für weiche Übergänge und längere Animationen geeignet
- Dateigrößen wachsen rasch mit Länge der Animation an
- Nicht responsiv und skalierbar, da pixelbasiert
- Nicht für interaktive Einbindung gedacht
Geeignet für:
- Schnelles und unkompliziertes Veröffentlichen kleinerer Animationen mit wenigen Einzelbildern
2. SVG-Animation mit CSS und Javascript
SVG ist ein Vektorformat, das seit 2011 von allen großen Browsern unterstützt wird. Vielen ist das SVG-Format geläufig, um z. B. Icons oder Logos in Webseiten einzubinden. Die SVG-Grafiken können mit Grafikprogrammen wie Adobe Illustrator erstellt werden. Mit Programmierkenntnissen in CSS lassen sich die Grafiken stylen und animieren. Und mit Javascript lassen sich SVGs auch interaktiv einbinden. Mehr zu SVGs und wie man sie animieren kann: SVG sei Dank: mehr Schub für die Teasergestaltung
Vorteile:
- Kleine Dateigrößen
- Skalierbar und responsiv
- Indexierbarer Text
- Lesbar von Screenreadern
- Interaktionen mit Inline-CSS/Javascript realsierbar
Nachteile:
- Programmierkenntnisse erforderlich
- Organische Animationen, wie gehende Figuren schwer umsetzbar
- SVG-Format wird nicht von allen CMS-Systemen default-mäßig unterstützt
Geeignet für:
- UX Animationen, kleine illustrative Animationen, Icon- und Logoanimationen, Teaser-Gestaltung
3. SVG-Animation mit GreenSock
Die Morph-Effekte von GreenSock funktionieren auch zwischen Objekten mit unterschiedlicher Zahl von Ankerpunkten.
GreenSock ist eine Animations-Library, die bereits seit über 10 Jahren weiterentwickelt wird. Wer mit CSS vertraut ist und vielleicht noch auf Grundkenntnisse in Javascript bauen kann, wird einen schnellen Einstieg in GreenSock finden. Mit GreenSock sind dank umfangreicher Zeitleistenfunktionen und Easing- und Morph-Effekte auch komplexe Animationen möglich. Eine Einführung zu GreenSock gibt es z. B. auf youTube: GSAP 3.0 Crash Course – JavaScript Animation Library
Vorteile:
- Kleine Dateigrößen
- Skalierbar und responsiv
- Komplexe Morpheffekte
- Viele dynamische Be- und Entschleunigskurven
- Interaktionen einfach umsetzbar
Nachteile:
- Programmierkenntnisse erforderlich
- Organische Animationen, wie gehende Figuren schwer umsetzbar
Geeignet für:
- Programmierer oder scriptaffine Designer, die komplexere illustrative Animationen mit oder ohne User-Interaktion erstellen möchten. Für Infografiken, Datenvisualisierung und illustrative Animationen
4. SVG-Animation mit SMIL
SMIL ist die native Animationssprache von SVG. Morph-Effekte und Interaktionen lassen sich direkt im SVG-DOM realisieren. Bevor man sich aber zu sehr über die Möglichkeiten freut, sollte man beachten, dass die Browserunterstützung von SMIL schwindet. Sarah Drasner, Autorin von SVG Animations, empfiehlt deshalb, auf alternative Techniken zu setzen. SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features
Vorteile:
- Kleine Dateigrößen
- Skalierbar und responsiv
- Morpheffekte
- Bewegung entlang eines Pfades
- Eventsteuerung mit hover oder click
Nachteile:
- Geringe Browserunterstützung
Geeignet für:
- Der Einsatz wird nicht empfohlen. Eine Alternative ist z. B. die Verwendung von GreenSock
5. Webanimation mit Adobe Animate
Animate ist das Vektoranimationsprogramm von Adobe und der Nachfolger von Adobe Flash. Die Bedienung und Funktionsweise ist weitgehend gleich geblieben. Der primäre Unterschied liegt in der Formatausgabe. Statt SWF-Dateien werden HTML5/Canvas-Formate exportiert.
Obwohl Canvas kein direktes Rendering von Vektorgrafiken unterstützt, sehen die Animationen scharf aus. Auch bei hochauflösenden Displays werden die Animationen sauber dargestellt. Dennoch würden wir uns ein Rendering im SVG-Format wünschen.
Animate bietet vielfältige Animationsmöglichkeiten. Dennoch lassen sich keine direkten Änderungen an Bezierkurven animieren. Natürliche Bewegungsabläufe sind so nur schwer umsetzbar.
Vorteile:
- Wer noch Adobe Flash kennt, kommt auch mit Adobe Animate zurecht
- Kleine Dateigrößen
- Komplexe (Erklär-) Filme realisierbar
Nachteile:
- Ausgabe im HTML-Canvas-Format
- Organische Animationen wie gehende Figuren schwer umsetzbar
Geeignet für:
- Erklärfilme, illustrative Animationen, Infografiken
6. Webanimation mit AfterEffects und Bodymovin/Lottie
AfterEffects erlaubt auch die organische Animation von Vektorgrafiken, wie das Beispiel zeigt. Ein großer Vorteil gegenüber den anderen Techniken.
AfterEffects ist das Animationsprogramm von Adobe und erinnert stark an Photoshop. Hinzu kommt allerdings die Zeitleiste, über die nahezu alle Parameter und Details des Ausgangsmaterials animiert werden können. Da AfterEffects auch die direkte Animation von Bezierkurven erlaubt, lassen sich auch natürliche Bewegungsabläufe bei Vektoranimationen erzielen.
Ursprünglich gedacht ist AfterEffects für die Erstellung effektlastiger Clips, wie Vorspanne, Werbefilme oder Trailer. Entsprechend liegt der Fokus auf der Ausgabe von Videoformaten. Doch mit Hilfe des AfterEffects-PlugIns Bodymovin ist der Export von Vektoranimationen im JSON-Format möglich. Per Javascript-Library Lottie lassen sich die Animationen in Webseiten oder Apps einbinden. Lottie interpretiert das JSON-Format und gibt es als SVG-Animation aus. Per Javascript kann die Animationswiedergabe beispielsweise per scrollen oder per Klick ausgelöst werden. Alternativ kann auch LottieFiles verwendet werden, um JSON-Animationen ohne Programmierkenntnisse interaktiv einzubinden.
Vorteile:
- Kleine Dateigrößen
- Skalierbar und responsiv
- Organische Animationen umsetzbar, wie gehende Figuren
- Komplexere (Erklär-) Filme realisierbar
- Interaktiv steuerbar
Nachteile:
- Einarbeitungszeit in Adobe AfterEffects
- Keine „echten“ 3D-Animationen umsetzbar
Geeignet für:
- Erklärfilme, Infografiken, Icon- und Logoanimationen, UX Animation, illustrative Animationen mit oder ohne User Interaktion
7. 3-D-Webanimation mit Three.js und WebGL
WebGL ist eine Programmierschnittstelle, die eine Darstellung animierter 3-D-Grafiken im Webbrowser ermöglicht. Allerdings ist die native Programmierung in WebGL sehr komplex und erfordert Kenntnisse in höheren Programmiersprachen. Leichter wird die Integration, wenn die 3-D-Javascript-Library Three.js hinzugezogen wird. WebGL und Three.js werden deshalb oft in einem Atemzug genannt. Einfache Grafiken oder Animationen können direkt in Three.js programmiert werden. Komplexere Grafiken lassen sich am Besten in einem 3-D-Programm erstellen und im nächsten Schritt mit Three.js einbinden und animieren.
Vorteile:
- Animationen mit WOW-Effekt
- Ermöglicht neue Web-Erlebnisse und Simulationen
- Interaktiv steuerbar
Nachteile:
- Native Programmierung in WebGL schwer
- Bedingt skalierbar und responsiv
Geeignet für:
- 3-D-Grafiken und Animationen mit oder ohne User Interaktion für die Darstellung im Webbrowser optimiert
Fazit:
Eine Erkenntnis konnten wir während unserer Suche nach der idealen Animationstechnik gewinnen: Die eine einzig wahre Lösung gibt es nicht. Jede Technologie hat ihre Berechtigung und kann je nach Anforderung und persönlichen Vorlieben die Passende sein.
Wer es minimalistisch mag, kann mit SVG-Grafiken plus handgescriptetem CSS spannende, kleinere Animationen realisieren. Auch Typo-Animationen sind möglich, da alle typografischen Parameter wie Schriftgrößen, Laufweiten und Zeilenabstände per Keyframe-Animation verändert werden können. Was man damit anstellen kann, haben wir einmal auf codepen demonstriert.
Die einzig wahre Animationstechnik gibt es nicht.
– Markus Remscheid, H2D2 Gmb
Die Kombination aus SVG und der Javascript-Bibliothek GreenSock ermöglicht komplexe Morpheffekte. Auch die Bewegungssteuerung entlang an Pfaden und Interaktion ist möglich. Da die Animationen per Code erzeugt werden, ist GreenSock mehr etwas für Programmierer oder Designer mit Spaß am Scripten.
Adobe Animate ist das vertraute Vektoranimationsprogramm für alle, die noch mit Adobe Flash gearbeitet haben. Animate birgt aber einige Limitierungen – sowohl in der Animationserstellung, als auch bei den Ausgabeformaten.
Adobe AfterEffects in Kombination mit Bodymovin/Lottie ist für uns aktuell die favorisierte Option. Der große Vorteil: auch natürliche und organische Bewegungsabläufe lassen sich in Vektorqualität bei kleinen Dateigrößen realisieren. Dazu ist eine interaktive Steuerung mit Hilfe von Lottie oder LottieFiles komfortabel umsetzbar. Wie genau sich AfterEffects-Animationen exportieren und interaktiv integrieren lassen, ist dann Thema für einen nächsten Blogpost.
Möchte man 3-D-Animationen performant und interaktiv einbinden, führt aktuell kein Weg an WebGL vorbei. In Kombination mit Three.js eröffnen sich so ganz neue Darstellungsmöglichkeiten für neuartige, aufregende Web-Erlebnisse.
Dieser Blog ist ein Gastbeitrag und wurde uns von der befreundeten Agentur H2D2 GmbH zur Verfügung gestellt. Wir sagen vielen Dank und freuen uns auf weitere gemeinsame Zusammenarbeit!
Zum Original-Beitrag gelangen Sie hier.
Kommentare
Keine Kommentare
Kommentar schreiben