JavaScript ist die letzte Möglichkeit, SVG zu animieren. Wir haben uns CSS angesehen, das großartig und ziemlich komfortabel ist, aber eine Reihe von SVG-Eigenschaften, die Sie möglicherweise animieren möchten, nicht ausführen kann. Dann haben wir uns SMIL angesehen, eine deklarative Syntax direkt im SVG-Code selbst, die insofern leistungsfähiger ist, als sie mehr Dinge animieren kann, einschließlich der Form des Elements selbst.
JavaScript kann alles, was einer von beiden kann, und es gut machen. Es kostet nur entweder das Schreiben von wirklich kompliziertem Code selbst oder den Aufwand einer Bibliothek, um Ihnen zu helfen. Aber sobald Sie einsatzbereit sind, kann die Syntax wirklich wunderbar und animationsfreundlich sein, und die Leistung kann tatsächlich erstklassig sein.
Ein weiterer Vorteil von JavaScript für SVG-Animationen ist die Unterstützung. Beim Animieren von SVG gibt es viele Macken, über die man sich Sorgen machen muss. Einige Browser unterstützen keine Transformationen für Elemente. Einige Browser machen seltsame Dinge beim Zoomen von Seiten. Einige widersprechen dem Transformationsursprung. JavaScript-Bibliotheken helfen häufig bei diesen Problemen.
Während wir speziell über Animation sprechen, geht es in vielen JavaScript-SVG-Bibliotheken im Allgemeinen um die Arbeit mit SVG. Sie können es erstellen und bearbeiten, auf Eigenschaften des Elements zugreifen, sie ändern usw. Ein bisschen wie das Hinzufügen einer robusteren API zu SVG.
Snag.svg - "jQuery für SVG"
Grundlegendes Beispiel für die Verwendung von Snap.svg:
Siehe den Pen BhHix von Chris Coyier (@chriscoyier) auf CodePen.
Eine andere Sache, die wir in diesem Video mit Snap.svg gemacht haben, ist die Konvertierung dieses CSS-Animationsstifts in Snap.svg, um uns beizubringen, dass wir Snap.svg verwenden können, um mit Inline-SVG zu arbeiten, das bereits auf der Seite vorhanden ist. Adobe hat selbst eine Reihe von Beispielen gesammelt.
Raphael - ältere Bibliothek vom selben Ersteller wie Snap.svg
SVG.js - "Eine einfache Bibliothek zum Bearbeiten und Animieren von SVG." Hier ist die Uhr-Demo, die wir uns angesehen haben und die zeigt, wie diese Animationen funktionieren, indem das DOM schnell bearbeitet wird.
D3.js - „D3.js ist eine JavaScript-Bibliothek zum Bearbeiten von Dokumenten basierend auf Daten. Mit D3 können Sie Daten mithilfe von HTML, SVG und CSS zum Leben erwecken. “ Hier ist ein Tutorial zum Erstellen von SVG und eine weitere Einführung in das Animieren.
GreenSock - „Ultrahochleistungsfähige Animation in professioneller Qualität für das moderne Web.“ Bei GreenSock geht es im Allgemeinen um Animationen im Web, es wird jedoch SVG unterstützt. Hier ist ein Stift, mit dem Sie sehen können, wie es funktioniert.
Velocity.js - "Beschleunigte JavaScript-Animation." Auch eine Bibliothek über Animationen im Web im Allgemeinen, die SVG unterstützt. Julian Shapiro hat es erstellt und darüber geschrieben, warum JavaScript-Animation tatsächlich der performanteste Animationsstil sein kann und wie Velocity.js funktioniert. Hier ist eine sehr einfache Demo, die einige SVG-spezifische Eigenschaften animiert.
Sie können es auch selbst mit JavaScript-Animationen ohne die Hilfe eines Frameworks ausführen. Denken Sie daran, dass sich Inline-SVG im DOM befindet, sodass Ihnen alle regulären DOM-API-Inhalte zur Verfügung stehen. Ein bisschen wie Sie, wie man jQuery nicht wirklich braucht, um mit dem DOM zu arbeiten, es macht es einfach oft einfacher. Hier ist ein Beispiel, das die Dinge auf ihre eigene Weise macht, was ziemlich interessant ist.