8 librerie JavaScript per animare SVG
SVG è una grafica indipendente dalla risoluzione. Ciò significa che lo farà guardare bene su qualsiasi tipo di schermo senza subire alcuna perdita di qualità. Oltre a ciò, puoi rendere SVG anche vivo con alcuni effetti di animazione.
In uno dei post della nostra serie SVG in precedenza, vi abbiamo mostrato come funziona l'animazione SVG con
Altro su Hongkiat.com:
- Animate.css - Libreria CSS3 per creare facilmente animazioni
- Animare facilmente il testo con Textillate.js
- Come convertire il testo di Photoshop in SVG
- Animare per nascondere e far scorrere il contenuto con jQuery
1. Vivus
Vivus è una libreria JavaScript che dà al tuo SVG l'aspetto di essere disegnato. Vivus lavora fuori dalla scatola senza bisogno di alcuna dipendenza (ad es. JQuery). Basta includere il .js file nel codice HTML e designare l'elemento SVG che si desidera animare, insieme ad alcune opzioni preimpostate per avviare subito l'animazione.
Per esempio:
nuovo Vivus ('svg-element', type: 'oneByOne', durata: 200); Quanto sopra animerà il mio elemento SVG che ha il svg elemento ID in 200 millisecondi. Ogni elemento di questo SVG verrà disegnato uno dopo l'altro entro quel periodo di tempo.
2. Bonsai
Bonsai è una potente libreria JavaScript che ti consente di disegnare, trasformare e animare elementi grafici su pagine web. Supporta sia il tipo di grafica HTML5 Canvas che SVG. Con Bonsai puoi costruire un semplice rettangolo o un cerchio o, se lo desideri, a multiplayer a tutti gli effetti gioco animato come questo. Puoi usare Orbit per sentire come funziona il Bonsai in azione dal vivo o dare un'occhiata a un paio di questi esempi impressionanti da cui trarre ispirazione.
3. Velocità
Velocity è una libreria JavaScript creata per animazioni veloci. La velocità di Velocity durante il rendering dell'animazione è incredibilmente veloce. Al confronto, jQuery e persino CSS, in confronto. L'API di Velocity funziona in modo simile all'animazione di jQuery, tranne che utilizza l'alias della parola chiave $ .Velocity () invece di $ .Animate (). A parte questo, puoi usare esattamente le stesse parole chiave di animazione come fadeIn e dissolvenza.
4. Raffaele
RaphaelJS è una libreria che ti permette di disegnare e animare immagini SVG vettoriali su pagine web. Supporta una vasta gamma di browser fino a IE6, il che rende Raphael la libreria JavaScript più affidabile nella nicchia. Con RaphaelJS, puoi costruire grafici analitici interattivi, mappe del mondo e interazioni di gioco simili a quelle di Counter Strike.
5. Snap
SnapSVG è un'altra libreria JavaScript popolare per l'animazione SVG sviluppata dallo sviluppatore Raphael, Dmitry Baranovskiy, insieme al team di Adobe Web Platform da zero. A differenza di Raphael, tuttavia, SnapSVG è pensato solo per i browser più recenti. Ciò consente alla libreria di essere significativamente più piccola di Raphael e di supportare funzionalità SVG come il ritaglio e il mascheramento.
6. Lazy Line Painter
Lazy Line Painter è un plugin jQuery per animare i percorsi SVG per animare la sequenza di disegno, simile a Vivus. La cattiva notizia è che questo plugin fa solo questa cosa molto specifica. Quindi, quando importi SVG da app come Illustrator o Inkscape, assicurati che non rimanga alcun colore di riempimento sul tuo SVG, solo i percorsi.
7. SVG.js
SVG.js è una libreria leggera per manipolare e animare SVG. Con questa libreria, sarai in grado di animare la dimensione, la posizione o il colore all'interno dell'elemento SVG. Tuttavia, non si anima solo; puoi anche applicare plugin aggiuntivi per aggiungere funzionalità extra. Questo esempio utilizza il plugin svg.filter.js per applicare filtri come sfocatura gaussiana, desaturazione, contrasto, seppia, ecc. All'immagine.
8. Passaggio pedonale
La passerella supporta tre tipi di elementi, sentiero, linea, e polyline usato per disegnare linee SVG. Ecco un esempio di Polygon che mostra l'animazione della linea di console di PlayStation 4.
