8 JavaScript-biblioteker til at animere SVG
SVG er en opløsningsuafhængig grafik. Det betyder det vil ser godt ud på enhver form for skærm uden at lide noget tab af kvalitet. Udover det kan du også få SVG til at blive levende med nogle animationseffekter.
I en af stillingerne i vores SVG-serie tidligere har vi vist dig, hvordan SVG-animation fungerer sammen med
Mere om Hongkiat.com:
- Animate.css - CSS3 Library for nemt at skabe animation
- Du kan nemt animere tekst med Textillate.js
- Sådan konverteres Photoshop-tekst til SVG
- Aktivér at skjule og slide indhold med jQuery
1. Vivus
Vivus er et JavaScript-bibliotek, som giver din SVG udseendet af at blive tegnet. Vivus arbejder ud af æsken uden behov for nogen afhængighed (fx jQuery). Du skal blot inkludere .js fil i din HTML, og udpeg det SVG element du vil animere sammen med nogle forudindstillede muligheder for at starte animationen med det samme.
For eksempel:
ny Vivus ('svg-element', type: 'oneByOne', varighed: 200); Ovenstående vil animere mit SVG element, der har svg-element ID i 200 millisekunder. Hvert element i denne SVG vil blive tegnet efter hinanden inden for den tidsramme.
2. Bonsai
Bonsai er et kraftfuldt JavaScript-bibliotek, der giver dig mulighed for at tegne, morph samt animere grafiske elementer på websider. Den understøtter både HTML5 grafik type Canvas og SVG. Med Bonsai kan du bygge et simpelt rektangel eller en cirkel, eller hvis du kan lide, a flot multiplayer animeret spil som denne. Du kan bruge Orbit til at føle, hvordan Bonsai arbejder i live handling eller tjek nogle af disse imponerende eksempler for at trække inspiration fra.
3. Hastighed
Velocity er et JavaScript-bibliotek bygget til hurtige animationer. Hastighedens hastighed, når rendering animation er utrolig hurtig. Det overgår jQuery, og endda CSS, i sammenligning. Velocity's API fungerer ligesom animationen i jQuery, medmindre det bruger søgeordet alias $ .Velocity () i stedet for $ .Animate (). På den side kan du bruge de nøjagtige samme animationsordninger som f.eks fadeIn og svinde bort.
4. Raphael
RaphaelJS er et bibliotek, der giver dig mulighed for at tegne såvel som animere vektor grafisk SVG på websider. Det understøtter en bred vifte af browsere hele vejen ned til IE6, hvilket stort set gør Raphael det mest pålidelige JavaScript-bibliotek i nichen. Med RaphaelJS kan du opbygge interaktive analytiske diagrammer, verdenskort og spilinteraktioner som er relateret til Counter Strike.
5. Snap
SnapSVG er et andet populært JavaScript-bibliotek til SVG-animation udviklet af Raphael-udvikleren, Dmitry Baranovskiy, sammen med Adobe Web Platform Team fra bunden. Til forskel fra Raphael er SnapSVG dog kun beregnet til de nyeste browsere. Det gør det muligt for biblioteket at være betydeligt mindre end Raphael og at understøtte SVG-funktioner som klipning og maskering.
6. Lazy Line Painter
Lazy Line Painter er et jQuery-plugin til animering af SVG-stier for at animere tegnsekvensen, der ligner Vivus. Den dårlige nyhed er, at dette plugin kun gør denne meget specifikke ting. Når du importerer SVG fra apps som Illustrator eller Inkscape, skal du sørge for, at der ikke er Fyld farve tilbage på din SVG, kun stierne.
7. SVG.js
SVG.js er et letvægtsbibliotek til manipulation og animering af SVG. Med dette bibliotek kan du animere størrelsen, placeringen eller farven i dit SVG-element. Det animerer dog ikke kun; Du kan også anvende ekstra plugins for at tilføje ekstra funktionaliteter. Dette eksempel bruger pluginet svg.filter.js til at anvende filtre som gaussisk sløring, desaturat, kontrast, sepia osv. Til billedet.
8. Gangbro
Walkway understøtter tre typer af elementer, sti, linje, og polylinje bruges til at tegne SVG linjer. Her er et eksempel fra Polygon, der viser PlayStation 4-konsollinjeprogrammeringen.
