JavaScript è l'ultimo dei modi in cui tratteremo l'animazione di SVG. Abbiamo esaminato CSS, che è ottimo e abbastanza comodo, ma non può eseguire un numero di proprietà SVG che potresti voler animare. Quindi abbiamo esaminato SMIL, che è una sintassi dichiarativa nel codice SVG stesso, che è più potente in quanto può animare più cose inclusa la forma dell'elemento stesso.
JavaScript può fare tutto ciò che uno di loro può fare e farlo bene. Ha solo il costo della scrittura di un codice davvero complicato o dell'overhead di una libreria per aiutarti. Ma una volta che sei attivo e funzionante, la sintassi può essere davvero meravigliosa e amichevole per le animazioni e le prestazioni possono effettivamente essere di prim'ordine.
Un altro vantaggio di utilizzare JavaScript per le animazioni SVG è il supporto. Ci sono molte stranezze di cui preoccuparsi durante l'animazione di SVG. Alcuni browser non supportano le trasformazioni sugli elementi. Alcuni browser fanno cose strane con lo zoom della pagina. Alcuni non sono coerenti con Transform-origin. Le librerie JavaScript spesso aiutano con questi problemi.
Mentre parliamo di animazione in particolare, molte librerie SVG JavaScript lavorano con SVG in generale. Possono crearlo e manipolarlo, accedere alle proprietà dall'elemento, modificarli, ecc. Un po 'come aggiungere un'API più robusta a SVG.
Snag.svg - "jQuery per SVG"
Esempio di base di utilizzo di Snap.svg:
Guarda la Pen BhHix di Chris Coyier (@chriscoyier) su CodePen.
Un'altra cosa che abbiamo fatto in questo video con Snap.svg è stata convertire questa penna di animazione CSS in Snap.svg, insegnandoci che possiamo usare Snap.svg per lavorare con SVG in linea già sulla pagina. Adobe stesso ha raccolto una serie di esempi.
Raphael - libreria precedente dello stesso creatore di Snap.svg
SVG.js - "Una libreria leggera per manipolare e animare SVG." Ecco la demo dell'orologio che abbiamo esaminato, che mostra come funzionano queste animazioni manipolando rapidamente il DOM.
D3.js - “D3.js è una libreria JavaScript per la manipolazione di documenti basati sui dati. D3 ti aiuta a dare vita ai dati utilizzando HTML, SVG e CSS. " Ecco un tutorial su come iniziare a creare SVG con esso e un altro introduzione all'animazione con esso.
GreenSock - "Animazione di livello professionale ad altissime prestazioni per il Web moderno". GreenSock riguarda le animazioni sul Web in generale, ma supporta SVG. Ecco una penna dove puoi vedere come funziona.
Velocity.js - "Animazione JavaScript accelerata". Anche una libreria sull'animazione sul web in generale, che supporta SVG. Julian Shapiro l'ha creato e ha spiegato perché l'animazione JavaScript può effettivamente essere lo stile di animazione più performante e come funziona Velocity.js. Ecco una demo molto semplice che anima alcune proprietà specifiche di SVG.
Sei anche libero di farlo da solo con le animazioni JavaScript senza l'aiuto di un framework. Ricorda che l'SVG in linea è nel DOM, quindi tutto il materiale dell'API DOM regolare è disponibile per te. Un po 'come te come non hai davvero bisogno di jQuery per lavorare con il DOM, spesso lo rende più facile. Ecco un esempio che fa le cose a modo loro che è piuttosto interessante.