JavaScript je posledný zo spôsobov, ako sa budeme venovať animácii SVG. Pozreli sme sa na CSS, ktoré je skvelé a celkom pohodlné, ale nedokáže vykonať niekoľko vlastností SVG, ktoré by ste možno chceli animovať. Potom sme sa pozreli na SMIL, čo je deklaratívna syntax priamo v samotnom kóde SVG, ktorá je výkonnejšia v tom, že dokáže animovať viac vecí vrátane tvaru samotného prvku.
JavaScript dokáže všetko, čo dokáže, a robí to dobre. Za cenu si stojí buď samotné napísanie skutočne komplikovaného kódu, alebo réžia knižnice, ktorá vám pomôže. Ale keď už ste v chode, syntax môže byť skutočne úžasná a priateľská k animáciám a výkon môže byť skutočne špičkový.
Ďalšou výhodou použitia JavaScriptu pre SVG animácie je podpora. Pri animácii SVG je potrebné sa znepokojiť. Niektoré prehliadače nepodporujú transformácie prvkov. Niektoré prehliadače robia so zväčšovaním stránok divné veci. Niektoré nie sú v súlade s pôvodom transformácie. Knižnice JavaScript často pomáhajú s týmito problémami.
Keď už hovoríme konkrétne o animácii, veľa knižníc SVG v JavaScripte je o práci s SVG všeobecne. Môžu ho vytvárať a manipulovať s ním, pristupovať k vlastnostiam prvku, meniť ich atď. Možno by chceli do SVG pridať robustnejšie API.
Snag.svg - „jQuery pre SVG“
Základný príklad použitia súboru Snap.svg:
Prezrite si Pen BhHix od Chrisa Coyiera (@chriscoyier) na stránkach CodePen.
Ďalšou vecou, ktorú sme v tomto videu vytvorili so Snap.svg, je prevedenie tohto CSS animačného pera na Snap.svg, čo nás učí, že môžeme použiť Snap.svg na prácu s vloženým SVG, ktorý je už na stránke. Spoločnosť Adobe zhromaždila množstvo príkladov sama.
Raphael - staršia knižnica od rovnakého tvorcu ako Snap.svg
SVG.js - „Ľahká knižnica na manipuláciu a animáciu SVG.“ Tu je ukážka hodín, na ktorú sme sa pozreli a ktorá ukazuje, ako tieto animácie fungujú pri rýchlej manipulácii s DOM.
D3.js - „D3.js je knižnica JavaScript na manipuláciu s dokumentmi na základe údajov. D3 vám pomôže oživiť dáta pomocou HTML, SVG a CSS. “ Tu je návod, ako s ním začať vytvárať SVG a ďalší, ktorý s ním predstavuje animáciu.
GreenSock - „Vysoko výkonná, profesionálna animácia pre moderný web.“ GreenSock je všeobecne o animáciách na webe, ale podporuje SVG. Tu je pero, kde môžete vidieť, ako to funguje.
Velocity.js - „Zrýchlená animácia JavaScriptu.“ Knižnica o animáciách na webe všeobecne, ktorá podporuje SVG. Vytvoril ju Julian Shapiro a písal o tom, prečo môže byť animácia JavaScriptu skutočne najvýkonnejším štýlom animácie, ako aj o tom, ako funguje Velocity.js. Tu je veľmi jednoduchá ukážka animujúca niektoré vlastnosti špecifické pre SVG.
Môžete sa tiež vydať na vlastnú päsť pomocou animácií JavaScriptu bez pomoci rámca. Pamätajte si, že vložený SVG je v DOM, takže máte k dispozícii všetky bežné veci rozhrania DOM API. Trochu ako vy, ako naozaj nepotrebujete program jQuery na prácu s DOM, len to často uľahčuje. Tu je príklad, ktorý robí veci po svojom, čo je dosť zaujímavé.