Hoch performante Animationen

Wie werden Web-Animationen gleichmäßig und ruckelfrei?

Hoch performante Animationen sind ein sinnvolles Tool zur Verbesserung der Informationsverarbeitung und Navigation auf Ihrer Webseite und unterstützen aktiv die Nutzer-Interaktion und das positive Nutzungserlebnis. Zahlreiche weniger gelungene Animationen im Internet zeigen jedoch, dass Web-Animationen nur dann nützlich sein können, wenn sie zum einen ruckelfrei ablaufen und und zum anderen durchdacht konzeptioniert sind.

So haben Animationen mit niedriger Frame-Rate negative Auswirkungen auf die User Experience und damit auch auf das Nutzerverhalten. Dies wirft die Frage auf, wie sich das Potential guter Web-Animationen durch eine hoch performante Darstellung optimal ausschöpfen lässt.

Web-Animationen mit CSS: Transitions

Im Rahmen von CSS3 (Cascading Style Sheets Level 3) finden sich im Wesentlichen zwei Optionen zur Animation von Inhalten: Transitions und Keyframe-Animationen. Unter CSS-Transitions werden Übergänge von einem Ausgangszustand in einen Endzustand verstanden und es sind keine Zwischenzustände möglich. Transitions werden in CSS zentral in zwei Bereichen angewendet. Mittels Transitions lässt sich der interaktive Wechsel des Zustands animieren, etwa durch die Fokussierung eines Elements. Zudem lassen sich Transitions bei der Arbeit mit JavaScript einsetzen, da sie eine Reaktion auf jede Art von Style-Änderung zeigen. Sie reagieren also auf Inline-Styles, Zuweisungen von Klassen oder Pseudoklassen. Von Vorteil ist zudem der in CSS3-Transitions eingebaute Fallback. Browser ohne Transitions führen dieselben Wechsel von Zuständen sprunghaft durch. Durch den eingebauten Fallback erfahren User keine Nachteile bei der Webseitennutzung.

Die bestmögliche Ausschöpfung des Potentials der Transition erfordert eine genauere Betrachtung des Browserverhaltens. Bei der Änderung von Layout-Eigenschaften einer Internetseite wie etwa der Operanden "width", "height", "top", "bottom", "left", "right", "border" oder "position", muss der Internetbrowser jedes Mal eine Neuberechnung des Layouts der Seite vornehmen. Dies ist erforderlich, da sich die Änderung einer Eigenschaft auch auf weitere Eigenschaften auswirken kann. Elemente können sich so beispielsweise verschieben. Die Berechnung des Layouts stellt einen komplexen Prozess dar, der je nach Seitenaufbau einige Millisekunden beanspruchen kann. Einmalige Änderungen an Layout-Eigenschaften beeinflussen die Dauer der Berechnungen und geänderten Anzeige also kaum. Handelt es sich jedoch um Animationen, so sind genau diese Millisekunden dafür verantwortlich, ob die Animationen gleichmäßig oder ruckelnd durchläuft. Die Berechnungszeit bestimmt, ob die Animation mit 60 oder nur 30 oder weniger Frames pro Sekunde ausgeführt wird.

Die Problematik können Sie vermeiden, indem Sie statt der Layout-Eigenschaften CSS3-Transformationen benutzen. Transformationen beziehen sich jeweils nur auf das bearbeitete Element und dessen Unterelemente, während die übrige Seite davon unbeeinflusst bleibt. Auf diese Weise werden komplexe Layout-Berechnungen vermieden. CSS-Transformationen erlauben zudem die Arbeit mit Sub-Pixeln: Elemente sind beim Verschieben nicht mehr von Pixelstufen abhängig und können auch um Pixel-Bruchteile bewegt werden.

Web-Animationen mit CSS: Keyframe-Animationen

Die zweite grundsätzliche Möglichkeit, mit der Sie Animationen über CSS umsetzen können, stellten Keyframe-Animationen dar. Speziell für selbstständig ablaufenden Animationen, die ohne das Eingreifen des Users starten, sind Keyframe Animationen geeignet. Ein Vorteil gegenüber Transitions ist, dass auch aufwändigere Animationsabläufe ohne Zwischenzustände definierbar sind. Zu berücksichtigen ist, dass auch hier das Rendering des Browsers, ähnlich wie bei Transitions, eine Rolle spielt. Die beiden Techniken der Transition und der Keyframe-Animationen sind jedoch zur Realisation aufwändigerer Animationen, bei denen eine Vielzahl von Elementen abhängig voneinander animiert werden, nicht hinreichend. Die hoch performante Umsetzung solcher Animationen erfordert JavaScript.

Auslagerung der Animationen auf die GPU

Ein weiterer Schritt in Richtung hoch performanter Animationen besteht in der Verlagerung einiger Web-Animationen von der CPU (Hauptprozessor) auf die GPU (Grafikprozessor). Die GPU eignet sich für grafische Berechnungen besser als die CPU. Diese Verlagerung erreichen Sie, indem Sie auch auf 2D-Ebene Transformationen in 3D verwenden. Im Allgemeinen tendieren Browser dazu, diese aufwändigeren Berechnungen auf die schneller arbeitende GPU zu verlagern. Zu berücksichtigen ist hierbei allerdings, dass 3D-Transformationen eigene Probleme wie etwa Flackern nach sich ziehen können. Jedoch ist davon auszugehen, dass künftig auch 2D-Transformationen auf den Grafikprozessor ausgelagert werden, sodass auf 2D-Ebene keine 3D-Transformationen mehr verwendet werden müssen, um die Prozesse auszulagern.

JavaScript-Animationen

Transitions und Keyframe-Animationen sind für komplexe Animationen zwar möglich, gestalten den Ablauf jedoch kompliziert. Daher empfiehlt sich für komplexere Animationen weiterhin JavaScript.

In diesem Zusammenhang gab es in jüngster Zeit einige Entwicklungen für die Performance von Animationen. Bislang wurden Eigenschaften in einem festgelegten Intervall im Abstand weniger Millisekunden geändert. Dies geschah unter Einsatz der Techniken setTimeout und setInterval. Diese Optionen bergen allerdings den Nachteil, dass Funktionen ausschließlich nach festgelegter Zeitspanne wiederholt werden können. Dies ist für Animationen nicht geeignet, denn Animationen müssen auf Abruf ausgeführt werden können. Entsprechend schwierig gestaltet sich bei der Programmierung dieser Funktionen, eine für die Animation optimale Zeitspanne festzulegen. Hinzu kommt, dass die Aufrufe von setTimeout und setInterval oft nicht mit der Bildfrequenz des Monitors korrespondieren. Diese Optionen führen also nicht bei jedem Aufruf zu einer tatsächlichen Aktualisierung der Animation.

requestAnimationFrame

Diese Strategie wird heute noch als Fallback für betagte Browser verwendet, während aktuelle Browser die Methode requestAnimationFrame beherrschen. Diese umgeht unnötige Zusatzberechnungen und trägt damit zur Schonung von Hauptprozessor und Akku bei. Besonders bei mobilen Endgeräten ist die Akkulaufzeit wichtig. Mit requestAnimationFrame können aktuelle Browser angeben, wann eine Seite einem neuen Rendering unterzogen werden kann. Auf diese Weise müssen Eigenschaften nur bei konkreter Verwendung neu berechnet werden. Diese vom Browser selbst definierte Zeitspanne für die Wiederholungsrate ist speziell bei paralleler Ausführung mehrerer Animationen im Browser nützlich. requestAnimationFrame wurde mit HTML5 eingeführt und kann die Frame-Rate im Zweifelsfalle im Sinne einer ruckelfreien Animation automatisch herabzusetzen.

Die Standard-Frame-Rate liegt im Allgemeinen bei 60 Frames pro Sekunde, variiert aber in Abhängigkeit der Auslastung des Hauptprozessors. Der Browser hält durch requestAnimationFrame nicht an einer vorab festgelegten Wiederholungsrate fest. Zudem findet sich ein Vorzug der requestAnimationFrame-Option darin, dass nur in gerade sichtbaren Tabs oder Fenstern Animationen ausgeführt werden. Befindet sich eine Animation in einem nicht sichtbaren Fenster, so wird sie gestoppt und erst dann wieder ausgeführt, sobald das Fenster oder Tab wieder aufgerufen werden. Auch das manuelle Anhalten der Animation ist möglich unter Nutzung des Gegenstücks cancelAnimationFrame.

Mit CSS3 und JavaScript Animationen optimieren

Im Rahmen von CSS3 und JavaScript finden Sie nützliche Möglichkeiten der hoch performanten Umsetzung von Animationen. Hierbei gilt es jedoch zu berücksichtigen, dass Animationen einen ähnlichen Effekt wie eine Latenz aufweisen, so dass Wartezeiten für User entstehen. Setzen Sie Animationen daher grundsätzlich durchdacht und sparsam ein. Geschickt platziert steigern sie jedoch Überblick sowie Navigation und tragen zu einem verbesserten Nutzererlebnis bei. Einen wichtigen Schritt in Richtung hoch performanter Animationen stellt die Option requestAnimationFrame in JavaScript dar. Gegenüber den bisherigen Möglichkeiten setTimeout und setInterval sollten Sie diese im Sinne der Performance vorziehen, denn speziell bei weniger leistungsstarken mobilen Endgeräten wird sich dies bemerkbar machen.

Haben Sie Fragen zu Animationen? Sprechen Sie uns an! Wir bei mindtwo in Bonn beraten Sie gerne bei Ihrem Webprojekt.