SVG-Animations-Techniken abwägen (mit Benchmarks)

Der folgende Beitrag ist ein Gastbeitrag von Sarah Drasner (@sarah_edo). Sarah forscht und hält Vorträge über Animationen. Ich habe die Gelegenheit ergriffen, sie hier einige dieser Forschungsergebnisse teilen zu lassen, diesmal mit Fokus auf SVG-Animationen und die verschiedenen technologischen Entscheidungen, die Sie treffen können.

Nachdem ich nun einige Monate mit verschiedenen SVG-Animations-Techniken gearbeitet habe, kann ich Ihnen einen grundlegenden Überblick geben, damit Sie sie selbst vergleichen können. Es gibt gute Gründe, jede dieser Methoden zu verwenden. Hoffentlich kann dieser Beitrag Sie zum richtigen Werkzeug für die jeweilige Aufgabe führen.

Wir werden einen grundlegenden Funktionsvergleich durchgehen. Dann werden wir uns ansehen, wie gut sie funktionieren. Zwei verschiedene Benchmarks sind enthalten. Einer stammt aus Aufzeichnungen der Chrome DevTools-Timeline, der andere misst visuelle Aufzeichnungen vom Bildschirm.

Während HTML-Elemente, die mit CSS gestylt sind, bei Animationen tendenziell besser abschneiden, hat SVG den Vorteil, dass es alles zeichnen kann, während es auflösungsunabhängig ist. In den Benchmarks arbeiten wir speziell mit SVG-Bildern.

Wir werden diese SVG-Animationstechniken vergleichen

• CSS @keyframes
• SMIL
• Velocity.js
• GreenSock (GSAP)

Es gibt unzählige weitere, die wir nicht abdecken, darunter Snap.svg und das ältere Raphaël.

Es ist erwähnenswert, dass CSS und SMIL native Animationsfunktionen im Browser haben, während GSAP und Velocity JavaScript-Bibliotheken sind, die eine oder mehrere der Rendering-Ebenen manipulieren, um Animationen zu erstellen.

Überblicksvergleiche

CSS

Vorteile

• Sie bieten eine gute Leistung, insbesondere wenn sie hardwarebeschleunigt sind, aber vielleicht nicht so gut, wie die DevTools-Timeline berichtet. Darauf werden wir später eingehen.
• Die Integration in bestehende Benutzeroberflächen ist einfach, da Sie keine weiteren Ressourcen laden müssen.
• CSS ist perfekt für kleine Interaktionen wie Hover-Zustände.
• Es gibt einige gute Ressourcen für fein abgestimmte Cubic-Bezier-Easing-Kurven, die es einfach machen, das potenzielle Ergebnis während der Entwicklung zu visualisieren.

Fallstricke

• Es gibt einige Kompatibilitätsprobleme mit älteren Versionen. @keyframes funktionieren nicht in IE9 oder älter.
• Sie können Benutzerinteraktionen nur über Pseudo-Zustände wie :hover und :focus erstellen; JavaScript ist für Ereignisse wie Klickinteraktionen erforderlich.
• Das Verketten mehrerer Animationen erfolgt über Verzögerungen, was für einfachere Animationen gut funktioniert. Bei längeren Animationen macht dies den Workflow sehr kompliziert. Es ist schwierig, Zeitpläne anzupassen, insbesondere wenn Sie die ersten Frames manipulieren müssen.
• Physik kann umständlich sein. Komplexe Aufgaben wie Reibung oder ein sich progressiv verlangsamender hüpfender Ball sind im besten Fall extrem komplex und im schlimmsten Fall keine Option.

• Prozentbasierte Zeitsteuerung ist schwieriger zu manipulieren als ihr JavaScript-Gegenstück, da sie eine Abstraktionsebene hinzufügt.

  

• transform-origin für SVG ist nicht konsistent
  • Das Stapeln von Transformationen nacheinander ist nicht intuitiv, da es auf die letzte Platzierung des Elements reagiert.
  • Es zeigt kein konsistentes Verhalten von Browser zu Browser.

Velocity.js

Vorteile

• Einfache Syntax. Wenn Sie bestehende jQuery-Animationen haben, können Sie sie leicht auf Velocity umstellen, da es die gleiche Syntax hat. Wenn Sie an $.animate gewöhnt sind, ist $.velocity einfach zu handhaben.
• Es gibt viele vorgefertigte Easing-Funktionen, und Federphysik ist verfügbar. Für weitere Verfeinerungen gibt es auch Step-Easing, bei dem Sie ein Array übergeben können.
• Die Syntax ist prägnanter als CSS oder SMIL.
• Sie können mehrere Animationen mit einer einzigen Codezeile versetzt starten, insbesondere wenn Sie das verfügbare UI-Plugin verwenden.
• Tiefere Browserunterstützung als CSS.

Fallstricke

• Die Leistung ist *wesentlich* besser als bei bestehendem jQuery .animate(), aber nicht so gut wie bei CSS, SMIL oder GSAP.
• Bietet Abwärtskompatibilität bis IE8, aber nicht so weit zurück wie GSAP.

GreenSock (GSAP)

Vorteile

• Einfach zu bedienen und die kompakteste Syntax.
• Die Zeitleiste von GSAP ermöglicht es Ihnen, sequenzierte Animationen einfach zu steuern und zu manipulieren. Dies macht die Arbeit mit längeren Animationen erheblich einfacher als mit fast jeder anderen Technik. (Sie können mehrere Tweens zur gleichen Zeit einstellen, Szenen erstellen und sich vorwärts und rückwärts bewegen, mit unterschiedlichen Zeitplänen - im Grunde Ihre Animationen animieren).
• Automatisch hardwarebeschleunigt. Die Leistung ist extrem gut - so gut wie natives Rendering.
• Das Anwenden von Physik ist einfach. Sie haben einen Ease-Visualizer, der ziemlich hilfreich ist.
• Bietet eine Lösung für einige bekannte transform-origin Probleme.
• Bietet Unterstützung bis IE6. Bessere Unterstützung als CSS, SMIL oder Velocity.
• GreenSock verfügt über einen robusten Funktionsumfang. Wenn Sie etwas tun müssen, hat GSAP es wahrscheinlich bedacht. Um eine Vorstellung davon zu bekommen, was ich meine, schauen Sie sich diese robuste Plugin-Seite an: https://greensock.com/plugins/ die meisten davon sind in der TweenMax-Version enthalten (obwohl sie für Dateigrößenbedenken eine schlanke, gestrippte TweenLite-Version haben). Es gibt einige spezialisierte Funktionen wie das Animieren entlang eines Pfades (wie SMIL mit <animateMotion>), Drag & Drop-Interaktionen und sogar die Arbeit mit Canvas.
• Sie haben ein jQuery-Plugin, das das bestehende jQuery .animate() überschreibt und die Leistung ohne zusätzlichen Code verbessert.

Fallstricke

• Ihr Code ist Open Source, aber Sie benötigen möglicherweise eine Lizenz für die kommerzielle Nutzung in bestimmten Situationen.

SMIL

Vorteile

• Hat eine unkomplizierte deklarative Syntax.
• Sie können Pfade und Formen mit der gleichen Syntax, mit der sie geschrieben wurden, morphen, was sie sehr intuitiv macht. Dies ist schön für Dinge wie Logos oder morphing Button-Icons.
• Sie können entlang eines Pfades animieren.
• Die Leistung ist sehr gut, möglicherweise besser als bei CSS, Velocity und GSAP in Bezug auf die visuelle Darstellung.
• Es gibt eine nicht auf Verzögerung basierende Verkettung, wie z. B. das Beginnen einer Animation, wenn eine andere endet.
• Einfach zu bestehender SVG-Syntax hinzuzufügen und keine externen Ressourcen laden zu müssen.

Fallstricke

• Es gibt Spekulationen darüber, ob die Unterstützung für SMIL fortgesetzt wird. Chrome führt es möglicherweise in die Web Animations API ein (zusammen mit allem anderen), aber wenn dies nicht geschieht, wird es möglicherweise nicht gut gepflegt, da es derzeit untergenutzt ist.
• Verkettete Animationen sind ziemlich begrenzt.
• Derzeit gibt es keine Unterstützung für IE.

Falls die Browserunterstützung für IE ein Hauptanliegen ist, hier ist eine sehr einfache Aufschlüsselung

Benchmark-Übersicht

Es gibt eine Reihe von Überlegungen bei der Erstellung eines ausgewogenen Benchmarks für Animationsansätze. Es musste ein sehr einfaches SVG sein – ich habe ein Rechteck mit einer Kontur verwendet. Außerdem musste es schleifen, damit Leistungsunterschiede im Laufe der Zeit beobachtet werden konnten. Der Benchmark-Code ist auf GitHub und auch in dieser Sammlung auf CodePen zu finden.

Bevor Sie mit der Animation eines SVG mit einer beliebigen Technik beginnen, ist es am besten, das SVG zu optimieren, genau wie bei jedem anderen Bild. Ein paar gute Optionen sind der In-Browser- SVG-Editor oder der Node-basierte SVGO.

Dies ist die hardwarebeschleunigte CSS-Version

Sehen Sie den Pen Benchmarking SVG Animation – CSS hardware accelerated von Sarah Drasner (@sdras) auf CodePen.

Es gibt zwei verschiedene Benchmarks: einen basierend auf den Aufzeichnungen der Chrome DevTools-Timeline und einen basierend auf visuellen Aufzeichnungen vom Bildschirm. Dieser duale Ansatz ist notwendig, da Chrome möglicherweise nicht alle Verarbeitungsschritte in der Timeline genau wiedergibt. Jack Doyle von GSAP zeigt in diesem Video gut die mögliche Untererfassung auf.

Da die Art und Weise, wie Animationen beeinflusst werden, stark von der Interpretation des Publikums abhängt, habe ich eine visuelle Aufzeichnung des „Ruckelns“ (Jank) aufgenommen, das beim Ausführen jeder Technik auftreten kann, zusammen mit den Chrome DevTools Timeline-Benchmarks. Jank ist das Ausmaß des visuellen Stotterns, das bei der Erstellung einer Animation oder eines Scroll-Events auftritt, mit dem Ziel, flüssige Animationen zu erzielen. Wenn Sie mehr darüber lesen möchten, ist JankFree eine großartige Ressource für Tools und Tipps zur Optimierung Ihres Codes.

Nicht alle Demos sind gleich – Hardwarebeschleunigung und CPU

Es ist wichtig, bei diesen Vergleichen zu erkennen, dass das reine Erstellen der Animation mit jeder Methode nicht die ganze Geschichte erzählt. Bei jeder Technik gibt es Möglichkeiten, die Animation hardwarezubeschleunigen, um die Leistung zu steigern. In dieser Demo ist jede Technik nativ für den jeweiligen Animationstyp beschleunigt. Es ist beispielsweise möglich, SMIL zu optimieren, indem dem Element eine eigene Ebene im Compositor mit CSS zugewiesen wird (z. B. transform: translateZ(0)). Stattdessen habe ich jedoch gezeigt, wie dies direkt in SMIL geschieht. Um die Leistungsdifferenz zu demonstrieren, habe ich auch ein nicht hardwarebeschleunigtes Beispiel für CSS und SMIL beibehalten.

Alle aus einer Bibliothek erstellten Codes wurden vor dem Test von den Autoren der Bibliothek geprüft und genehmigt.

Wie man mit CSS hardwarebeschleunigt

• Setzen von Transformationen auf null und dann Bewegen mit Transformationen.
• Sie lagern sie auf die GPU (Graphics Processing Unit) aus. Die meisten modernen Browser verfügen über Hardwarebeschleunigung, nutzen diese aber erst, wenn sie dazu aufgefordert werden.
• Weitere GPU-Beschleunigung: backface-visibility: hidden; und perspective: 1000; – verhindert das Flackern der Animation.
• Isolieren Sie die Ebene, die Sie verschieben oder anpassen müssen.
• Verschieben mit Transformationen.

Wie man mit SMIL hardwarebeschleunigt

• Verwenden Sie <animateTransform> anstelle von <animate> und setzen Sie x-, y-, z-Werte (mit 0 für z).
• Ähnlich wie bei CSS verschiebt dies das Element in eine eigene Ebene. Das Verschieben mit Transformationen ist besser als mit Rändern oder Top/Left, da es nicht neu gezeichnet werden muss.

Wie man mit Velocity hardwarebeschleunigt

• Verschieben mit translateX und translateY. Setzen Sie das Element auf translateZ: 0;.
• Vermeiden Sie Layout-Thrashing, indem Sie Variablen für Elemente deklarieren, die Sie mehrmals animieren, um mehrfache Lookups zu vermeiden (hier nicht anwendbar, aber erwähnenswert).

Wie man mit GSAP hardwarebeschleunigt

• In der Demo haben wir das Element auf force3D: "true" gesetzt, aber GSAP liefert dies jetzt automatisch mit. Das bedeutet, dass Sie nicht translateZ: 0; verwenden müssen, um hardwarezubeschleunigen, es ist bereits enthalten.
• Das Bewegen von Objekten mit X und Y ist besser als mit Rändern.
• TweenLite ist die leichtgewichtigere Version von GSAP und es wird empfohlen, diese für kleinere Animationen zu verwenden. TweenMax bietet Unterstützung für Schleifen, daher verwenden wir sie hier.

Ein Wort zur Vorsicht: Die gleichzeitige Hardwarebeschleunigung zu vieler Ebenen kann sich negativ auswirken. Jede Ebene ist eine gemappte GPU-Textur – eine übermäßige Anzahl erschöpft schnell die verfügbaren Ressourcen. Daher ist es wichtig, die Hardwarebeschleunigung umsichtig einzusetzen.

Benchmarks

Hier sind die Ergebnisse der Timeline-Benchmarks: (die kleineren Balken deuten auf eine bessere Leistung hin.) Achten Sie besonders auf „Painting“, da dies das kostspieligste der Ereignisse ist. Jeder Benchmark wurde 5 Mal ausgeführt, um Konsistenz zu gewährleisten, und dann gemittelt. Hier ist eine Version von CSS enthalten, die hardwarebeschleunigt (HA) ist, und auch, wo sie es nicht ist (naiv), um zu veranschaulichen, wie stark die Leistung beeinflusst werden kann. Diese Tests wurden auf Chrome Version 40.0.2214.91 (64-Bit) durchgeführt – der neuesten stabilen Version zum Zeitpunkt der Veröffentlichung des Artikels. Bitte beachten Sie, dass die Versionsnummer die Timeline-Berichterstattung ändern kann.

Wichtige Hinweise

Opazität und Transformation scheinen insgesamt besser zu funktionieren, und die Timeline berichtet, dass sie bei hardwarebeschleunigtem CSS *wesentlich* besser sind.

Aufgrund der oben genannten Möglichkeit der Untererfassung für CSS-Animationen ist es wichtig, die Dinge nicht nur anhand der Timeline zu bewerten, sondern auch visuell, da dies die Art und Weise ist, wie das Publikum die Animation bewerten wird.

Visuelle Benchmarks

Um die ganze Geschichte zu sehen, habe ich auch einige Benchmarks basierend auf dem visuellen Geschehen durchgeführt. Dazu habe ich einen Screencast der ersten vollständigen Iteration der Schleife in jeder Technik aufgenommen und dann ein Tool namens Physmo verwendet, um jede Bewegung des SVG-Elements zu plotten. Ich habe einen Vergleich jeder Zeit aufgezeichnet, in der sich die Änderungsrate visuell nicht mehr als 2 Frames fortbewegte. Dies zeigt die Zeitspanne, in der die Animation angeblich angehalten würde, also das Ruckeln. Hier ist, wie jede Technik abgeschnitten hat.

Wie Sie sehen können, hat optimiertes CSS, genau wie Jacks Demonstration gezeigt hat, in Bezug auf die visuelle Darstellung nicht jede andere Technik übertroffen. SMIL hatte die konstanteste Änderungsrate, gefolgt von GSAP. GSAP, CSS und Velocity schnitten in einem relativ ähnlichen Bereich ab im Vergleich zu dem, was die Timeline berichtete, die besagte, dass sie weit auseinander lagen.

Bitte beachten Sie, dass die Screencast-Technologie die Ergebnisse hier möglicherweise beeinflusst. Ich ermutige Sie, mit den von mir erstellten Demos zu spielen oder, besser noch, eigene Vergleiche zu schreiben, um zu sehen, wie die Techniken abschneiden.

Benchmarks variieren je nach Kontext. Die Arbeit mit einem anderen Satz von Parametern, insbesondere beim Laden anderer Ressourcen, könnte diese Ergebnisse beeinflussen. Ein fortlaufender Dialog über die Leistung unter verschiedenen Umständen ist entscheidend für die Verbesserung von Animationstechnologien.

Komplexere Animationen

Das ist alles gut und schön für kurze Animationen, aber wie sieht es aus, wenn man eine längere, komplexere Animation erstellt? GSAP ermöglicht es Ihnen, auf einer einstellbaren Timeline oder vielen Timelines zu arbeiten – von denen jede die Zeitachse anpassen, die Reihenfolge ändern und sogar überlappen können. CSS erlaubt es Ihnen nicht, verschiedene Transformationen gleichzeitig zu überlappen, was für sehr realistische Bewegungen eine große Rolle spielt. Wenn Sie darüber nachdenken, wie sich jemand bewegt oder wie Objekte miteinander interagieren, gibt es nur sehr selten Momente, in denen alles in einer linearen Kette ohne Überlappung funktioniert.

Bei CSS-Animationen können Sie Ereignisse mit Verzögerungen verketten, aber was passiert, wenn Sie einen Teil davon anpassen möchten und dieser entsprechende Teile hat? Sie müssen dann Ihren Weg durch den gesamten Erstellungsprozess zurückverfolgen und die Mathematik für alles, was folgt, neu berechnen. GSAPs Timeline bietet Ihnen viel mehr Kontrolle für die Manipulation dieser. Sie ermöglichen auch Dinge wie Physik, die für realistische Animationen entscheidend sein können.

SMIL eignet sich hervorragend für Dinge wie das Morphen von SVGs ineinander, was keine der anderen Techniken in gleichem Umfang bietet. Es ist jedoch noch unklar, ob die Spezifikation im Laufe der Zeit gepflegt wird, und da Sie bestehende Punkte verwenden müssen, macht es weniger Sinn, diese Technik für viele verschiedene Elemente gleichzeitig zu verwenden.

CSS ist wunderbar für Dinge wie Übergänge von Seitenelementen. Dinge, die Sie häufiger auf einer Unternehmenswebsite sehen, bei denen das Ziel nicht darin besteht, Animationen zu präsentieren, sondern eher kleinere Effekte, um Interesse zu wecken oder Änderungen hervorzuheben. Wenn Sie ein kleines bisschen Interaktion benötigen, können Hover-Effekte und leichtgewichtige Scrolling-Bibliotheken wie Waypoints ein einfacher Weg sein, dies zu tun.

Animationsbibliotheken wie GSAP und Velocity eignen sich hervorragend für die Produktion, da der Aufwand und die erforderliche Code-Menge viel geringer sind. Velocity erreicht möglicherweise nicht die gleiche Leistung wie die anderen, aber die einfache Tatsache, dass Sie Ihren bestehenden jQuery-Code mit einem Wort in etwas Leistungsfähigeres ändern können, ist ein großer Vorteil. Velocity bietet auch Physik, was CSS nicht kann. GSAP geht noch einen Schritt weiter: Sie können bestehendes jQuery übernehmen und einfach das GSAP jQuery-Plugin hinzufügen. Es überschreibt Ihr bestehendes jQuery und macht alles leistungsfähiger, ohne dass Sie den Code ändern müssen. GSAP bietet auch Physik, Bewegung entlang eines Pfades, was auch immer Sie brauchen.

Aufgrund einiger ernsthafter Leistungsmängel sollte jQuery allein nicht mehr als geeignete Methode zur Animation von Dingen betrachtet werden.

Schlussfolgerungen

Empfehlungen für die Verwendung

• Verwenden Sie CSS-Animationen für kleine Übergänge oder einfache Animationen. Sie müssen keine weitere Ressource laden, und kleine Transformationen beim Hovern können ein Segen für Interaktion und Benutzererlebnis sein. Insbesondere wenn Sie keine Physik oder viele verschachtelte SVG-Transformationen benötigen, was nicht immer notwendig ist.
• Verwenden Sie SMIL für das Morphen von SVGs ineinander, wie bei Logos usw., und wenn das animierte Element in IE zu einem statischen Bild zurückfallen kann.
• Verwenden Sie Velocity für einen Leistungsschub bei bestehenden jQuery-Animationen, ohne viel Code ändern zu müssen.
• Verwenden Sie GSAP für hoch performante Animationen oder längerfristige Animationen mit mehreren Szenen. Es löst große Probleme mit der browserübergreifenden Konsistenz für SVG-Transformationsursprünge. GSAP ist sehr robust mit einem breiten Funktionsumfang, aber Sie können kleinere Versionen ohne viele Schnörkel verwenden und nur das laden, was notwendig ist.

Jeder hat seine eigenen Vorlieben, und es ist unmöglich, vollständig unparteiisch zu sein. Es ist wichtig, bei der Auswahl von Werkzeugen bewusst vorzugehen, da sie alle spezifische Kompromisse haben und der Kontext in einer Entwicklungsumgebung zählt. Dieser Beitrag dient als allgemeiner Vergleich, um Entwicklern bei der Auswahl der am besten geeigneten Technik für ihre Ziele zu helfen.