Animations­techniken im Vergleich

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 Vektor­animationen 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 Programmier­kenntnisse lassen sich GIF-Animationen in Bildbearbeitungs­programmen 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.

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 Grafik­programmen wie Adobe Illustrator erstellt werden. Mit Programmier­kenntnissen 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 

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 Zeitleisten­funktionen 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

Mit SMIL lassen sich User-Interaktionen ganz ohne Javascript umsetzen. Allerdings schwindet die Browser­unterstützung. Und für Microsofts Browser IE und Edge existierte diese noch nie.

SMIL ist die native Animations­sprache 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 Browser­unterstü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

Animate ist das Vektoranimations­programm 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 hochauf­lö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.