8 JavaScript-bibliotek för att animera SVG
SVG är en upplösningsoberoende grafik. Det betyder att det ska ser bra ut på vilken typ av skärm som helst utan att du har någon kvalitetsförlust. Utöver det kan du också göra SVG levande med några animationseffekter.
I en av posten i vår SVG-serie tidigare har vi visat dig hur SVG-animering fungerar med
Mer på Hongkiat.com:
- Animate.css - CSS3 Library för att enkelt skapa animering
- Lätt animera text med Textillate.js
- Hur konverterar Photoshop text till SVG
- Animera för att dölja och glida innehåll med jQuery
1. Vivus
Vivus är ett JavaScript-bibliotek som ger ditt SVG utseendet att bli ritat. Vivus fungerar ur lådan utan att behöva några beroenden (t ex jQuery). Helt enkelt inkludera .js filen i din HTML och ange det SVG-element du vill animera, tillsammans med några förinställda alternativ för att starta animationen direkt.
Till exempel:
ny Vivus ('svg-element', typ: 'oneByOne', duration: 200); Ovanstående kommer att animera mitt SVG-element som har svg-elementet ID på 200 millisekunder. Varje del av denna SVG kommer att dras efter varandra inom den tidsramen.
2. Bonsai
Bonsai är ett kraftfullt JavaScript-bibliotek som låter dig rita, morph samt animera grafiska element på webbsidor. Den stöder både HTML5 grafiktyp Canvas och SVG. Med Bonsai kan du bygga en enkel rektangel eller en cirkel eller om du vill, a fullfjädrad multiplayer animerat spel som den här. Du kan använda Orbit för att känna hur Bonsai fungerar i live action eller kolla in några av dessa imponerande exempel för att dra inspiration från.
3. Hastighet
Velocity är ett JavaScript-bibliotek byggt för snabba animeringar. Hastighetens hastighet när rendering animering är otroligt snabb. Den överträffar jQuery, och till och med CSS, i jämförelse. Hastighets API fungerar som animeringen i jQuery, förutom att den använder sökordets alias $ .Velocity () istället för $ .Animate (). Det åt sidan kan du använda exakt samma animationssökord som FadeIn och tona ut.
4. Raphael
RaphaelJS är ett bibliotek som låter dig rita såväl som animera vektorgrafik SVG på webbsidor. Den stöder ett brett spektrum av webbläsare hela vägen ner till IE6, vilket ganska mycket gör Raphael det mest pålitliga JavaScript-biblioteket i nischen. Med RaphaelJS kan du bygga interaktiva analytiska diagram, världskartor och spelinteraktioner som liknar Counter Strike.
5. Snap
SnapSVG är ett annat populärt JavaScript-bibliotek för SVG-animering, utvecklad av Raphael-utvecklaren Dmitry Baranovskiy, tillsammans med Adobe Web Platform Team från grunden. Till skillnad från Raphael är SnapSVG menat för endast de senaste webbläsarna. Det gör att biblioteket kan vara betydligt mindre än Raphael och att stödja SVG-funktioner som klipping och maskering.
6. Lazy Line Painter
Lazy Line Painter är ett jQuery-plugin för animering av SVG-banor för att animera ritningssekvensen, som liknar Vivus. Den dåliga nyheten är det här pluginet gör bara den här speciella saken. När du importerar SVG från appar som Illustrator eller Inkscape, se till att det inte finns någon fyllnadsfärg kvar på din SVG, bara banorna.
7. SVG.js
SVG.js är ett lättviktsbibliotek för att manipulera och animera SVG. Med det här biblioteket kan du animera storleken, positionen eller färgen i ditt SVG-element. Det animerar inte bara Du kan också använda ytterligare plugins för att lägga till extra funktioner. I det här exemplet används plugin svg.filter.js för att applicera filter som gaussisk oskärpa, desaturat, kontrast, sepia etc. till bilden.
8. gångväg
Walkway stöder tre typer av element, väg, linje, och polyline brukade dra SVG-linjer. Här är ett exempel från Polygon som visar PlayStation 4-konsollinjeanimering.
