8 JavaScript-biblioteker for å animere SVG
SVG er en oppløsningsuavhengig grafikk. Det betyr at det vil se bra ut på hvilken som helst type skjerm uten å lide noe tap av kvalitet. Utover det kan du også gjøre SVG levende med noen animasjonseffekter.
I en av innleggene i vår SVG-serie tidligere har vi vist deg hvordan SVG-animasjon fungerer med
Mer på Hongkiat.com:
- Animate.css - CSS3 Library for å lage animasjon enkelt
- Du kan enkelt animere tekst med Textillate.js
- Slik konverterer du Photoshop-tekst til SVG
- Animer å skjule og skli innhold med jQuery
1. Vivus
Vivus er et JavaScript-bibliotek som gir din SVG utseendet på å bli tegnet. Vivus jobber ut av esken uten behov for noen avhengigheter (for eksempel jQuery). Bare ta med .js fil i HTML-en din og angi SVG-elementet du vil animere, sammen med noen forhåndsinnstilte alternativer for å starte animasjonen med en gang.
For eksempel:
ny Vivus ('svg-element', type: 'oneByOne', varighet: 200); Ovennevnte vil animere mitt SVG-element som har svg-element ID i 200 millisekunder. Hvert element i denne SVG vil bli tegnet etter hverandre innen den tidsrammen.
2. Bonsai
Bonsai er et kraftig JavaScript-bibliotek som lar deg tegne, morph samt animere grafiske elementer på nettsider. Den støtter både HTML5 grafikk type Lerret og SVG. Med Bonsai kan du bygge et enkelt rektangel eller en sirkel, eller hvis du vil, a fullverdig multiplayer animert spill som dette. Du kan bruke Orbit å føle hvordan Bonsai jobber i live handling eller sjekk ut noen av disse imponerende eksemplene for å trekke inspirasjon fra.
3. Hastighet
Velocity er et JavaScript-bibliotek bygget for raske animasjoner. Hastighetens hastighet når rendering av animasjon er utrolig rask. Den overgår jQuery, og til og med CSS, i sammenligning. Velocity's API fungerer som animasjonen i jQuery, bortsett fra at den bruker søkeordet alias $ .Velocity () i stedet for $ .Animate (). Som til side kan du bruke nøyaktig samme animasjonsnøkkelord som fadeIn og fadeout.
4. Raphael
RaphaelJS er et bibliotek som lar deg tegne samt animere vektorgrafisk SVG på nettsider. Den støtter et bredt utvalg av nettlesere helt ned til IE6, noe som gjør Raphael det mest pålitelige JavaScript-biblioteket i nisje. Med RaphaelJS kan du bygge interaktive analytiske diagrammer, verdenskart og spillinteraksjoner som er lik Counter Strike.
5. Snap
SnapSVG er et annet populært JavaScript-bibliotek for SVG-animasjon utviklet av Raphael-utvikleren Dmitry Baranovskiy, sammen med Adobe Web Platform Team fra grunnen. Til forskjell fra Raphael skjønt, er SnapSVG ment for bare de nyeste nettleserne. Det gjør at biblioteket kan være betydelig mindre enn Raphael og for å støtte SVG-funksjoner som klipping og maskering.
6. Lazy Line Painter
Lazy Line Painter er en jQuery-plugin for å animere SVG-baner for å animere tegnsekvensen, likt Vivus. Den dårlige nyheten er at dette pluginet bare gjør dette veldig spesifikke. Derfor, når du importerer SVG fra apper som Illustrator eller Inkscape, må du sørge for at det ikke er Fyll farge igjen på SVG, bare stiene.
7. SVG.js
SVG.js er et lett bibliotek for å manipulere og animere SVG. Med dette biblioteket kan du animere størrelsen, posisjonen eller fargen i SVG-elementet. Det animerer ikke bare; Du kan også legge til flere plugins for å legge til ekstra funksjoner. Dette eksemplet bruker plugin svg.filter.js for å bruke filtre som gaussisk uskarphet, desaturat, kontrast, sepia etc. til bildet.
8. Gangvei
Walkway støtter tre typer elementer, sti, linje, og polylinje pleide å tegne SVG linjer. Her er et eksempel fra Polygon som viser PlayStation 4-konsolllinjeanimasjonen.
