JavaScript ist der letzte Weg, den wir zur Animation von SVG behandeln werden. Wir haben uns CSS angesehen, das großartig und ziemlich komfortabel ist, aber es kann nicht eine Reihe von SVG-Eigenschaften animieren, die Sie vielleicht animieren möchten. Dann haben wir uns SMIL angesehen, eine deklarative Syntax direkt im SVG-Code selbst, die leistungsfähiger ist, da sie mehr Dinge animieren kann, einschließlich der Form der Elemente selbst.
JavaScript kann alles, was die beiden anderen können, und das gut. Es geht nur auf Kosten entweder des Schreibens wirklich komplizierten Codes selbst oder des Overheads einer Bibliothek, die Ihnen hilft. Aber wenn Sie erst einmal am Laufen sind, kann die Syntax wirklich wunderbar und animationsfreundlich sein, und die Leistung kann tatsächlich erstklassig sein.
Ein weiterer Vorteil der Verwendung von JavaScript für SVG-Animationen ist die Unterstützung. Es gibt viele Eigenheiten, die bei der Animation von SVG zu beachten sind. Einige Browser unterstützen keine Transformationen an Elementen. Einige Browser machen seltsame Dinge mit dem Zoomen von Seiten. Einige sind inkonsistent mit `transform-origin`. JavaScript-Bibliotheken helfen oft bei diesen Problemen.
Während wir speziell über Animation sprechen, geht es bei vielen JavaScript-SVG-Bibliotheken darum, mit SVG im Allgemeinen zu arbeiten. Sie können es erstellen und manipulieren, auf Eigenschaften von Elementen zugreifen, sie ändern usw. Quasi wie das Hinzufügen einer robusteren API zu SVG.
Snag.svg – „jQuery für SVG“
Grundlegendes Beispiel für die Verwendung von Snap.svg
Eine weitere Sache, die wir in diesem Video mit Snap.svg gemacht haben, ist die Konvertierung dieses CSS-Animations-Pen zu Snap.svg, was uns lehrt, dass wir Snap.svg verwenden können, um mit Inline-SVG zu arbeiten, das sich bereits auf der Seite befindet. Adobe hat eine Reihe von Beispielen selbst gesammelt.
Raphael – ältere Bibliothek vom selben Schöpfer wie Snap.svg
SVG.js – „Eine leichte Bibliothek zur Manipulation und Animation von SVG.“ Hier ist die Uhr-Demo, die wir uns angesehen haben (offline), die zeigt, wie diese Animationen funktionieren, indem sie den DOM schnell manipulieren.
D3.js – „D3.js ist eine JavaScript-Bibliothek zur Manipulation von Dokumenten auf der Grundlage von Daten. D3 hilft Ihnen, Daten mit HTML, SVG und CSS zum Leben zu erwecken.“ Hier ist ein Tutorial zum Einstieg in die Erstellung von SVG damit und ein weiteres, das die Animation damit einführt.
GreenSock – „Ultra-hochleistungsfähige, professionelle Animationen für das moderne Web.“ GreenSock beschäftigt sich im Allgemeinen mit Animationen im Web, unterstützt aber SVG. Hier ist ein Pen, in dem Sie sehen können, wie es funktioniert.
Velocity.js – „Beschleunigte JavaScript-Animation.“ Ebenfalls eine Bibliothek zur Animation im Allgemeinen im Web, die SVG unterstützt. Julian Shapiro hat sie erstellt und darüber geschrieben, warum JavaScript-Animationen tatsächlich der performanteste Animationsstil sein kann, sowie wie Velocity.js funktioniert. Hier ist eine sehr einfache Demo, die einige SVG-spezifische Eigenschaften animiert.
Sie können auch mit JavaScript-Animationen ohne Hilfe eines Frameworks selbst etwas erstellen. Denken Sie daran, dass Inline-SVG im DOM ist, sodass die gesamte normale DOM-API für Sie verfügbar ist. Ähnlich wie Sie jQuery nicht wirklich brauchen, um mit dem DOM zu arbeiten, macht es es oft nur einfacher. Hier ist ein Beispiel, das Dinge auf seine eigene, ziemlich interessante Weise tut.