8 Knjižnice JavaScript za animacijo SVG
SVG je grafika, neodvisna od ločljivosti. To pomeni, da bo dobro izgleda na vseh vrstah zaslona, ne da bi utrpela izgubo kakovosti. Poleg tega lahko SVG oživite tudi z nekaterimi animacijskimi učinki.
V eni od objav naše serije SVG smo vam pokazali, kako SVG animacija deluje z
Več na Hongkiat.com:
- Animate.css - CSS3 knjižnica za enostavno ustvarjanje animacije
- Enostavno animirajte besedilo z besedilom Textillate.js
- Kako pretvoriti Photoshop besedilo v SVG
- Animirajte, da skrijete in drsite vsebino z jQuery
1. Vivus
Vivus je knjižnica JavaScript, ki daje vašemu SVG videz, da je narisan. Vivus deluje izven polja brez potrebe po kakršnih koli odvisnostih (npr. JQuery). Preprosto vključite .js datoteko v HTML-ju in določite element SVG, ki ga želite animirati, skupaj z nekaterimi prednastavljenimi možnostmi za začetek animacije takoj..
Na primer:
novo Vivus ('svg-element', tip: 'oneByOne', trajanje: 200); Zgoraj bo animiral moj element SVG, ki ima svg-element ID v 200 milisekundah. Vsak element tega SVG-ja bo v tem časovnem okviru narisan drug za drugim.
2. Bonsai
Bonsai je zmogljiva JavaScript knjižnica, ki vam omogoča risanje, preoblikovanje in animiranje grafičnih elementov na spletnih straneh. Podpira tako grafično vrsto HTML5 Canvas kot SVG. Z Bonsaijem lahko zgradite preprost pravokotnik ali krog ali če želite, a polnopravni multiplayer animirana igra, kot je ta. Lahko uporabite Orbit, da začutite, kako Bonsai deluje v živih akcijah ali si oglejte nekaj teh impresivnih primerov.
3. Hitrost
Velocity je knjižnica JavaScript, zgrajena za hitre animacije. Hitrost hitrosti pri upodabljanju animacije je neverjetno hitra. V primerjavi z JQuery in celo CSS. API Velocity deluje podobno kot animacija v jQuery, razen če uporablja vzdevek ključne besede $ .velocity () namesto $ .animate (). Če ste ob strani, lahko uporabite enake ključne besede za animacijo, kot so fadeIn in zbledeti.
4. Raphael
RaphaelJS je knjižnica, ki vam omogoča risanje in animiranje vektorske grafike SVG na spletnih straneh. Podpira širok spekter brskalnikov vse do IE6, kar v veliki meri naredi Raphaela najbolj zanesljivo JavaScript knjižnico v niši. S storitvijo RaphaelJS lahko izdelate interaktivne analitične grafikone, zemljevide sveta in interakcije z igrami, ki so podobne tistim pri Counter Strike.
5. Snap
SnapSVG je še ena priljubljena knjižnica JavaScript za animacijo SVG, ki jo je razvil razvijalec Raphaela Dmitry Baranovskiy, skupaj z ekipo Adobe Web Platform iz tal. Za razliko od Raphaela pa je SnapSVG namenjen samo najnovejšim brskalnikom. To omogoča, da je knjižnica bistveno manjša od Raphaela in podpira funkcije SVG, kot so izrezovanje in maskiranje.
6. Lazy Line Painter
Lazy Line Painter je vtičnik jQuery za animiranje poti SVG, ki animirajo zaporedje risb, podobno kot Vivus. Slaba novica je, da ta plugin naredi samo to zelo specifično stvar. Zato, ko uvozite SVG iz aplikacij, kot je Illustrator ali Inkscape, zagotovite, da na vašem SVG-ju ni leve barve, samo poti.
7. SVG.js
SVG.js je lahka knjižnica za upravljanje in animacijo SVG-ja. S to knjižnico boste lahko animirali velikost, položaj ali barvo v vašem elementu SVG. Ne samo da animira; za dodajanje dodatnih funkcij lahko uporabite tudi dodatne vtičnike. Ta primer uporablja vtičnik svg.filter.js za uporabo filtrov, kot so Gaussova zamegljenost, desaturacija, kontrast, sepija itd..
8. Pešpot
Walkway podpira tri vrste elementov, poti, vrstico, in polilinijo za risanje linij SVG. Tukaj je primer iz Polygona, ki prikazuje animacijo konzolne vrstice PlayStation 4.
