8 JavaScript biblioteka za animiranje SVG-a
SVG je grafika neovisna o razlučivosti. To znači da hoće izgledaju dobro na bilo kojoj vrsti zaslona bez gubitka kvalitete. Osim toga, SVG može oživjeti s nekim animacijskim efektima.
U jednom od postova naše SVG serije ranije, pokazali smo vam kako SVG animacija radi s
Više na Hongkiat.com:
- Animate.css - CSS3 knjižnica za jednostavno stvaranje animacije
- Jednostavno animirajte tekst pomoću Textillate.js
- Kako pretvoriti Photoshop tekst u SVG
- Animirajte za skrivanje i slanje sadržaja s jQuery
1. Vivus
Vivus je JavaScript knjižnica koja daje vašem SVG-u izgled izvlačenja. Vivus radi izvan okvira bez potrebe za bilo kakvim ovisnostima (npr. JQuery). Jednostavno uključite .js datoteku u HTML-u i odredite SVG element koji želite animirati, zajedno s nekim unaprijed postavljenim opcijama da biste odmah pokrenuli animaciju.
Na primjer:
novi Vivus ('svg-element', tip: 'oneByOne', trajanje: 200); Navedeno će animirati moj SVG element koji ima SVG elemenata ID u 200 milisekundi. Svaki element SVG-a bit će nacrtan jedan za drugim unutar tog vremenskog okvira.
2. Bonsai
Bonsai je moćna JavaScript biblioteka koja vam omogućuje crtanje, preoblikovanje i animiranje grafičkih elemenata na web stranicama. Podržava i HTML5 grafički tip Canvas i SVG. Uz Bonsai, možete izgraditi jednostavan pravokutnik ili krug ili ako želite, a punopravni multiplayer animirana igra poput ove. Možete koristiti Orbit kako biste osjetili kako Bonsai radi u živoj akciji ili provjerite nekoliko impresivnih primjera iz kojih možete crpsti inspiraciju.
3. Brzina
Brzina je JavaScript biblioteka izgrađena za brze animacije. Brzina pri brzini animacije je nevjerojatno brza. U usporedbi s tim, on nadmašuje jQuery, pa čak i CSS. API Velocitya radi slično animaciji u jQuery-u, osim što koristi pseudonim ključne riječi $ .Velocity () umjesto $ .Animate (). To na stranu, možete koristiti iste ključne riječi animacije kao što su nestati u i izblijediti.
4. Raphael
RaphaelJS je knjižnica koja vam omogućuje crtanje, kao i animiranje vektorske grafike SVG na web stranicama. Podržava širok raspon preglednika sve do IE6, što čini Raphaela najsigurnijom JavaScript bibliotekom u niši. Uz RaphaelJS možete izgraditi interaktivne analitičke karte, karte svijeta i interakcije igara slične onima u Counter Strike.
5. Snap
SnapSVG je još jedna popularna JavaScript biblioteka za SVG animaciju koju je razvio Raphaelov developer, Dmitry Baranovskiy, zajedno s timom Adobe Web Platform iz temelja. Za razliku od Raphaela, SnapSVG je namijenjen samo najnovijim preglednicima. To omogućuje knjižnici da bude znatno manja od Raphaela i da podržava SVG značajke kao što su izrezivanje i maskiranje.
6. Lazy Line Painter
Lazy Line Painter je jQuery plugin za animiranje SVG putova za animiranje slijeda crtanja, slično Vivusu. Loša vijest je da ovaj dodatak radi samo ovu vrlo specifičnu stvar. Stoga, kada uvezete SVG iz aplikacija kao što su Illustrator ili Inkscape, provjerite da na SVG-u nema lijeve boje, samo putanje.
7. SVG.js
SVG.js je lagana knjižnica za manipuliranje i animiranje SVG-a. S ovom knjižnicom moći ćete animirati veličinu, položaj ili boju unutar vašeg SVG elementa. Ne samo da animira; možete dodati i dodatne dodatke da biste dodali dodatne funkcionalnosti. Ovaj primjer koristi dodatak svg.filter.js za primjenu filtara kao što su Gaussova zamućenja, desaturacija, kontrast, sepija itd..
8. Šetnica
Walkway podržava tri tipa elemenata, staza, crta, i razlomljenu za crtanje SVG linija. Ovdje je primjer iz Polygona koji prikazuje PlayStation 4 konzolnu animaciju.
