JavaScript je poslední ze způsobů, kterými se budeme zabývat při animaci SVG. Podívali jsme se na CSS, který je skvělý a docela pohodlný, ale nemůže dělat řadu vlastností SVG, které byste chtěli animovat. Pak jsme se podívali na SMIL, což je deklarativní syntaxe přímo v samotném kódu SVG, která je výkonnější v tom, že dokáže animovat více věcí, včetně tvaru samotného prvku.
JavaScript může dělat všechno, co může, a dělat to dobře. Jde to jen za cenu, že buď sami napíšete opravdu komplikovaný kód, nebo režii knihovny, která vám pomůže. Ale jakmile jste v provozu, syntaxe může být opravdu úžasná a přátelská k animacím a výkon může být skutečně špičkový.
Další výhodou přechodu na JavaScript pro SVG animace je podpora. Při animaci SVG je třeba mít spoustu starostí. Některé prohlížeče nepodporují transformace prvků. Některé prohlížeče dělají s přiblížením stránky divné věci. Některé nejsou v souladu s původem transformace. S těmito problémy často pomáhají knihovny JavaScriptu.
Když mluvíme konkrétně o animaci, mnoho knihoven JavaScript SVG je o práci s SVG obecně. Mohou jej vytvářet a manipulovat s ním, přistupovat k vlastnostem z elementu, měnit je atd. Někomu se líbí přidat robustnější API do SVG.
Snag.svg - „jQuery pro SVG“
Základní příklad použití Snap.svg:
Podívejte se na Pen BhHix od Chrisa Coyiera (@chriscoyier) na CodePen.
Další věcí, kterou jsme v tomto videu provedli se Snap.svg, je převedení tohoto CSS animačního pera na Snap.svg, což nás učí, že můžeme použít Snap.svg pro práci s vloženým SVG již na stránce. Společnost Adobe sama shromáždila řadu příkladů.
Raphael - starší knihovna od stejného tvůrce jako Snap.svg
SVG.js - „Lehká knihovna pro manipulaci a animaci SVG.“ Zde je ukázka hodin, na kterou jsme se podívali a která ukazuje, jak tyto animace fungují rychlou manipulací s DOM.
D3.js - „D3.js je knihovna JavaScript pro manipulaci s dokumenty na základě dat. D3 vám pomůže oživit data pomocí HTML, SVG a CSS. “ Zde je návod, jak s ním začít vytvářet SVG a další úvodní animace.
GreenSock - „Vysoce výkonná, profesionální animace pro moderní web.“ GreenSock je obecně o animacích na webu, ale podporuje SVG. Zde je pero, kde můžete vidět, jak to funguje.
Velocity.js - „Zrychlená animace JavaScriptu.“ Obecně také knihovna o animaci na webu, která podporuje SVG. Vytvořil ji Julian Shapiro a psal o tom, proč může být animace JavaScriptu ve skutečnosti nejvýkonnějším stylem animace, a také o tom, jak funguje Velocity.js. Zde je velmi jednoduchá ukázka animující některé vlastnosti specifické pro SVG.
Můžete se do toho pustit také sami pomocí animací JavaScriptu bez pomoci rámce. Nezapomeňte, že vložený SVG je v DOMu, takže máte k dispozici všechny běžné věci DOM API. Něco jako vy, jak opravdu nepotřebujete jQuery pro práci s DOM, jen to často usnadňuje. Zde je příklad, který dělá věci po svém, což je docela zajímavé.