Wie alles im großen, weiten Netz unterliegt auch das Thema Webanimation einem ständigen Wandel. Wie man knackige Ideen in diesem Bereich umsetzt und welche neuen Entwicklungen es hier gibt, haben wir hier einmal zusammengestellt:
Flash
Jeder, der schon etwas länger umfangreichere Animationen im Web erstellt, hat sicher noch Adobes Plattform Flash kennengelernt. Erst durch sie wurden aufwändige und anschauliche Animationen und Interaktionen browserfähig und die weitentwickelte Benutzeroberfläche bot Einsteigern ohne Programmierkenntnis eine motivierende Lernkurve.
Doch nun der Haken: Der Niedergang begann mit der schlechten Optimierung für mobile Geräte und führte schließlich zur bekannten Absage der Flash-Unterstützung auf iOS. Der daraufhin integrierteHTML5-Export brachte allerdings auch tiefgreifende Einschränkungen mit sich, sodass ein erfolgreicher HTML5-Export nur gelingt, wenn in der Entwicklung stets auf Kompatibilität geachtet wird. Zudem setzt Adobes Export mit CreateJS auf eine eher leistungsschwächere und schwergewichtige JavaScript-Bibliothek zur Animation der Inhalte.
Nichtsdestotrotz bleibt aber sowohl die Flash-Oberfläche mit ihren Werkzeugen und Animationsmöglichkeiten, als auch das Flash-Exportformat SWF in seiner Leistungsstärke und Dateigröße von den HTML5-Technologien unerreicht.
Edge Animate
Für manche bereits als Adobes Flash-Nachfolger gefeiert, bietet Edge Animate bisher leider nur einen wesentlich geringeren Funktionsumfang. Es ist Teil des Creative Cloud Abos und daher gut mit den anderen CC-Tools verknüpft. So erfolgt die Vorschau für iOS- u. Android-Geräte in Edge Inspect.
Dank grafischer Benutzeroberfläche ist der Einstieg auch mit wenig Skript-Kenntnis angenehm. Die gewohnten Elemente, wie die Bühne zum Szenenaufbau, Zeitleiste zur Visualisierung der Abläufe,die Sortierung in Ebenen und schachtelbare Objekte erinnern an Flash oder Adobes After Effects. Sie helfen ungemein bei der Strukturierung gerade großer Projekte.
Durch die sehr stark ausgedünnte Werkzeugpalette bietet sich allerdings nicht die umfangreiche Gestaltungsfreiheit wie in der Flash-IDE. Ein Linien-, Verlaufs- oder gar Pinsel-Tool sucht man vergebens, was sicher der Web-Kompatibilität und dem noch frühen Programm-Entwicklungsstand geschuldet ist. Im Workflow kommen daher vor allem zuvor gestaltete Grafiken als PNG zum Einsatz. Leider ist derzeit selbst das Bearbeiten von SVG-Knoten noch nicht möglich. Ein Pluspunkt ist die Unterstützung von Animationspfaden. Auch das Skalierungs-Verhalten der Elemente lässt sich für ein responsives Weblayout optimieren.
Edge Animate nutzt neben HTML5 und CSS3 die beliebte JavaScript Bibliothek jQuery. Da diese ursprünglich nicht gezielt für umfangreiche Webanimationen entwickelt wurde, ist die Objekt-Verwaltung nicht optimal und der Speicherbedarf erhöht, auch kann nicht in vollem Umfang auf Hardwarebeschleunigung zurückgegriffen werden.
Durch die Darstellung der Animationselemente- und Abläufe in Zeitleisten-Form eignet sich Edge Animate gut für aufwändige und verschachtelte Animationen. Ein Beispiel aus der Umsetzung sei hier nicht verwährt: Für das Portal www.gestatten-max.de der Deutschen Bahn AG haben wir Edge Animate genutzt.
Greensock Animation Platform (GSAP)
Die Reihe der Tools erweitert sich um das weit verbreitete Animations-Framework GSAP, das sicher noch einigen aus der Arbeit mit Flash bekannt ist. Mittlerweile bietet es eine eigenständige JavaScript-Bibliothek für die aktuellen Web-Standards an. Gestaffelt in verschiedene Lizenz-Modelle bietet es umfangreiche und ausgefeilte Plugins zur Textanimation, SVG-Manipulation und Animationen mit physikalischen Effekten (Abprallen, Beschleunigung, Schwerkraft etc.).
Durch auswählbare Bibliothek-Pakete kann die Dateigröße gezielt niedrig gehalten werden. Dank effizientem Objekt- und Speicher-Management und umfassender Hardwarebeschleunigung kann GSAP seine sehr gute Leistungsfähigkeit in diversen Tests belegen. Das machen auch wir uns zunutze: Aktuell nutzen wir GSAP stark für den Relaunch unserer eigenen Agentur-Website (Sie dürfen gespannt sein!).
CSS3-Animations / CSS3-Transitions
Eine Alternative zur JavaScript-orientierten Webanimation stellen die nativen Techniken CSS3-Animations / CSS3-Transitions der Cascading Style Sheets 3 dar. Ihr größter Vorteil zeigt sich in einfachen Animationen durch ihren geringen Code-Umfang, was z.B. für simple hover-Effekte über GUI-Elementen oder für wiederkehrende, lineare Animationen, wie z.B. einen pulsierenden Button oder einen Farbwechsel, sinnvoll sein kann . Derzeit noch beschwerlich sind die nötigen Code-Anpassungen für verschiedene Browser, wobei speziell für diese Aufgabe nützliche Web-Tools zur Code-Generierung zum Einsatz kommen können.
Mit steigendem Animations-Umfang sinkt allerdings die Leistungsstärke durch fehlende Hardwarebeschleunigung. An seine Grenzen stößt CSS3 schnell bei Animationen, in denen der zeitliche Ablauf manipuliert werden soll (pause, reverse, beschleunigt oder verzögert) sowie beim Umfang der animierbaren Element-Eigenschaften. Um die Möglichkeiten von CSS3-Animationen voll ausschöpfen zu können, gibt es eigene Bibliotheken wie Transit oder Animate.css.
Unser Fazit: Welche Technologie für ein Projekt geeignet ist, hängt ganz klar vom Umfang der Animationen ab. Gerade für aufwändige, verschachtelte Abläufe eignen sich Programme mit grafischer Benutzeroberfläche.
Neben den genannten Tools gibt es natürlich noch diverse andere mit ihren eigenen Vorzügen. So wirbt die unter MIT-Lizenz frei nutzbare Velocity.js-Bibliothek mit ihrem geringen Gewicht und hoher Leistungsstärke. Das MacOS-orientierte Tumult Hype bietet eine ähnlich ausgefeilte Benutzeroberfläche wie Edge Animate und verspricht keine Coding-Kenntnisse zu verlangen. Ebenfalls interessant ist die Web Animations API des W3C, die derzeit jedoch noch eine spärliche Browser-Unterstützung bietet.
Und damit: Frisch ans Werk mit neuen Projekten – und neuen Entwicklungen. Sprechen Sie uns gern darauf an!