JavaScript este ultimul mod în care vom aborda animarea SVG. Ne-am uitat la CSS, care este minunat și destul de confortabil, dar nu poate face o serie de proprietăți SVG pe care ați putea dori să le animați. Apoi ne-am uitat la SMIL, care este o sintaxă declarativă chiar în codul SVG în sine, care este mai puternic în sensul că poate anima mai multe lucruri, inclusiv forma elementului în sine.
JavaScript poate face tot ce poate face oricare dintre acestea și o poate face bine. Pur și simplu costă fie scrierea unui cod foarte complicat, fie cheltuielile generale ale unei biblioteci pentru a vă ajuta. Dar, odată ce ați pornit, sintaxa poate fi cu adevărat minunată și prietenoasă cu animațiile, iar performanța poate fi de fapt de primă clasă.
Un alt avantaj al folosirii JavaScript pentru animațiile SVG este suportul. Există o mulțime de ciudățenii care trebuie îngrijorate în timpul animării SVG. Unele browsere nu acceptă transformări pe elemente. Unele browsere fac lucruri ciudate cu zoomul paginii. Unele sunt incompatibile cu originea transformată. Bibliotecile JavaScript ajută adesea la aceste probleme.
În timp ce vorbim despre animație în mod specific, multe biblioteci SVG JavaScript lucrează cu SVG în general. Îl pot crea și manipula, pot accesa proprietăți din element, le pot schimba, etc. Îți place să adaugi un API mai robust în SVG.
Snag.svg - „jQuery pentru SVG”
Exemplu de bază de utilizare a Snap.svg:
Vedeți Pen BhHix de Chris Coyier (@chriscoyier) pe CodePen.
Un alt lucru pe care l-am făcut în acest videoclip cu Snap.svg este să transformăm acest stilou de animație CSS în Snap.svg, învățându-ne că putem folosi Snap.svg pentru a lucra cu SVG inline deja pe pagină. Adobe a colectat ei înșiși o serie de exemple.
Raphael - bibliotecă mai veche de la același creator ca Snap.svg
SVG.js - „O bibliotecă ușoară pentru manipularea și animarea SVG.” Iată demo-ul ceasului la care ne-am uitat, arătând cum funcționează aceste animații, manipulând rapid DOM-ul.
D3.js - „D3.js este o bibliotecă JavaScript pentru manipularea documentelor pe baza datelor. D3 vă ajută să dați viață datelor folosind HTML, SVG și CSS. ” Iată un tutorial despre cum să începeți să creați SVG cu acesta și un alt element introductiv de animare cu acesta.
GreenSock - „Animație de înaltă performanță, de calitate profesională pentru web-ul modern”. GreenSock este despre animații de pe web în general, dar acceptă SVG. Iată un stilou în care puteți vedea cum funcționează.
Velocity.js - „Animație JavaScript accelerată”. De asemenea, o bibliotecă despre animație pe web, în general, care acceptă SVG. Julian Shapiro a creat-o și a scris despre motivele pentru care animația JavaScript poate fi de fapt cel mai performant stil de animație, precum și despre modul în care funcționează Velocity.js. Iată o demonstrație foarte simplă care animă unele proprietăți specifice SVG.
De asemenea, sunteți liber să alegeți singur cu animații JavaScript fără ajutorul unui cadru. Nu uitați că SVG-ul în linie este în DOM, astfel încât toate lucrurile obișnuite ale API-ului DOM vă sunt disponibile. Îți place cum nu ai nevoie de jQuery pentru a lucra cu DOM, ci doar de multe ori este mai ușor. Iată un exemplu care face lucrurile în felul lor, destul de interesant.