8 Biblioteci JavaScript pentru a anima SVG
SVG este un grafic independent de rezoluție. Asta înseamnă că o va face arata bine pe orice tip de ecran fara a suferi pierderi de calitate. Dincolo de asta, puteți face SVG să vii și cu unele efecte de animație.
Într-un post din seria noastră SVG anterior, v-am arătat cum funcționează animația SVG cu
Mai multe despre Hongkiat.com:
- Animate.css - Biblioteca CSS3 pentru a crea animație cu ușurință
- Animați cu ușurință textul cu Textillate.js
- Cum se convertește textul Photoshop în SVG
- Animați pentru a ascunde și aluneca conținutul cu jQuery
1. Vivus
Vivus este o bibliotecă JavaScript care oferă SVG-ul dvs. apariția de a fi tras. Vivus funcționează din cutie fără a fi nevoie de dependențe (de exemplu, jQuery). Pur și simplu includeți .js fișier în HTML și desemnați elementul SVG pe care doriți să-l animați, împreună cu unele opțiuni prestabilite pentru a începe animația imediat.
De exemplu:
noul Vivus ('svg-element', type: 'oneByOne', durata: 200); Cele de mai sus vor anima elementul meu SVG care are svg element ID în 200 de milisecunde. Fiecare element al acestui SVG va fi desenat unul după celălalt în acel interval de timp.
2. Bonsai
Bonsai este o bibliotecă puternică JavaScript care vă permite să desenați, să transformați și să animați elemente grafice pe paginile web. Sprijină atât tipul grafic HTML5, cât și SVG. Cu Bonsai, puteți construi un dreptunghi simplu sau un cerc sau dacă doriți, a multiplayer cu drepturi depline joc animat ca acesta. Puteți folosi Orbit pentru a simți cum Bonsai lucrează în acțiune live sau pentru a vedea câteva dintre aceste exemple impresionante pentru a atrage inspirația.
3. Viteza
Velocity este o bibliotecă JavaScript construită pentru animații rapide. Viteza vitezei la redarea animației este incredibil de rapidă. Acesta depășește performanțele jQuery, și chiar CSS, în comparație. Velocity API funcționează similar cu animația din jQuery cu excepția faptului că utilizează aliasul de cuvinte cheie $ .Velocity () in loc de $ .Animate (). În afară de asta, puteți utiliza exact aceleași cuvinte cheie de animație, cum ar fi fadeIn și fadeOut.
4. Raphael
RaphaelJS este o bibliotecă care vă permite să desenați și să animați SVG grafic vectorial pe paginile web. Acesta suportă o gamă largă de browsere până la IE6, ceea ce face destul de mult ca Raphael să fie cea mai fiabilă bibliotecă JavaScript din nișă. Cu RaphaelJS, puteți construi grafice interactive analitică, hărți ale lumii și interacțiuni de joc asemănătoare cu cele ale Counter Strike.
5. Snap
SnapSVG este o altă bibliotecă populară JavaScript pentru animația SVG dezvoltată de dezvoltatorul Raphael, Dmitry Baranovskiy, împreună cu platforma Adobe Web Platform de la început. Spre deosebire de Raphael, SnapSVG este destinat doar celor mai recente browsere. Acest lucru permite bibliotecii să fie semnificativ mai mică decât Raphael și să susțină funcțiile SVG cum ar fi tăierea și mascarea.
6. Pictorul liniștit al liniei
Lazy Line Painter este un plugin jQuery pentru animarea căilor SVG pentru animarea secvenței de desen, similar cu Vivus. Vestea proastă este că acest plugin nu face decât acest lucru foarte specific. Prin urmare, atunci când importați SVG din aplicații precum Illustrator sau Inkscape, asigurați-vă că nu există nici o culoare de umplere pe SVG, ci doar căile.
7. SVG.js
SVG.js este o bibliotecă ușoară pentru manipularea și animarea SVG. Cu această bibliotecă, veți putea anima dimensiunea, poziția sau culoarea în elementul dvs. SVG. Nu numai că animă; puteți aplica și pluginuri suplimentare pentru a adăuga funcționalități suplimentare. Acest exemplu folosește pluginul svg.filter.js pentru a aplica filtrelor cum ar fi estomparea gaussiană, desaturarea, contrastul, sepia etc..
8. Walkway
Walkway suportă trei tipuri de elemente, cale, linia, și polilinie folosit pentru a desena linii SVG. Iată un exemplu de la poligonul care arată animația liniei consolei PlayStation 4.
