Share
I denne opplæringen skal vi introdusere Snap.svg, et JavaScript-bibliotek som hjelper med å animere og manipulere SVG-innhold. For å demonstrere noen av funksjonene som er tilgjengelige, skal vi animere et SVG-øye.
Snap.svg er et JavaScript-bibliotek som gjør det enkelt å lage og manipulere SVG-grafikk for moderne nettlesere. Det er etterfølgeren til Dmitry Baranovskiy's Raphaël; det mest populære Javascript-biblioteket for å jobbe med SVG.
Raphäel.js er et flott bibliotek. Utgitt i 2008 var den største vinneren sin støtte for nettlesere fra IE 5.5 og fremover. Det var imidlertid begrensende å støtte så mange nettlesere, og mente at den ikke kunne implementere de nyeste utviklingene, istedenfor å stole på et felles undergruppe av SVG-funksjoner.
Etter en stund delte Raphäel.js-fellesskapet seg i to, en gruppe som stole på det for kryssbrowser-kompatibilitet, og en annen som brukte den til å lage SVGer. Denne sistnevnte gruppen krevde endringer for å støtte flere SVG-funksjoner som Raphäel.js ikke kunne håndtere.
Derfor ble Snap.svg bygget, skrevet helt fra grunnen av Dmitry Baranovskiy (fra Adobe Web Platform Team), for å kunne jobbe med SVG lettere og bruke det siste som SVG kan tilby; funksjoner som maskering, mønstre, gradienter, grupper, animasjoner og mer.
Ta en titt på API-dokumentasjonen, og du vil se funksjoner som maske, gruppe, gradient, filter, animere og mønster, som du kan søke på SVGs.
Snap.svg hjelper deg med å generere grafikk, men det kan også fungere med eksisterende SVG. Dette betyr at ditt SVG-innhold ikke nødvendigvis må opprettes med Snap.svg, du er også fri til å manipulere grafikk opprettet med verktøy som Adobe Illustrator, Inkscape eller Sketch.
For det første må du laste ned Snap.svg. Med det som er gjort finner du følgende i arkivet:
Etter å ha lastet ned Snap.svg-ressursene, start et nytt webprosjekt som må inkludere:
Opprett en HTML-mal og referanse "scripts / snap.svg.js" og "scripts / main.js" -skriptene et sted på siden din.
Deretter plasserer du en beholder inne i og gi den et id. Du bør ha noe litt slik:
Introduserer Snap.svg
La oss nå hoppe direkte inn i kodingen. For å følge med trenger du litt grunnleggende JavaScript-kunnskap og forståelse, men det spiller ingen rolle for mye fordi vi ikke går for dypt med denne opplæringen.
For det første vil vi initialisere Snap, peker på svg nettopp opprettet og tilordne den til en variabel. I vårt tilfelle heter variabelen s
Accentsconagua
var s = Snap ("# svg");Fra nå av, innenfor s variabel får vi tilgang til alle Snap.svg metoder. For eksempel, la oss si at vi vil lage en sirkel eller et rektangel.
// Sirkel med 80px radius var sirkel = s.circle (90,120,80); // Square med 160px sidebredde var kvadrat = s.rect (210,40,160,160); // Ellipse med 80px vertikal radius og 50px horisontal radius var ellipse = s.ellipse (460,120,50,80);
Koden ovenfor vil generere følgende resultat:
Som du kan se fra vedlagt skjermbilde, har formene som standard en # 000 (svart) fyllfarge uten annen styling. La oss samhandle med dem og legge til noen flere stylingattributter, for eksempel fylle farge, fylle opacity, slagfarge, slagbredde, strekkupasitet. Du kan sjekke SVG-attributter for flere detaljer.
circle.attr (fill: 'coral', slag: 'coral', strokeOpacity: .3, strokevidde: 10); square.attr (fill: 'lightblue', slag: 'lightblue', strokeOpacity: .3, strokevidde: 10); ellipse.attr (fill: 'mediumturquoise', slag: 'mediumturquoise', strokeOpacity: .2, strokevidde: 10);
Disse egenskapene har gjort våre svg-former mye vakrere!
La oss ta vårt eksempel og gå utover det grunnleggende.
Snap.svg bruker en kraftig våpenkalt gruppe, som, som navnet antyder, grupperer vektorer sammen, noe som gjør dem til en form. Du kan gruppere så mange figurer som du vil, ved å legge dem til som en liste.
La oss lage to sirkler, gruppere dem og senke fyllingen av hver sirkel for å visualisere tydeligere hva som skjer.
varcirkel_1 = s.cirkel (200, 200, 140); varcirkel_2 = s.cirkel (150, 200, 140); varcirkler = s.group (sirkel_1, sirkel_2); sirkler.attr (fyll: 'coral', fillOpacity: .6);
La oss nå si at vi ønsker å skape et imaginært øye med de grupperte elementene vi allerede har laget. Vi kan gjøre det med maske. Først må vi lage en ekstra ellipse og plassere den midt i gruppen.
var circle_1 = s.circle (300, 200, 140); varcirkel_2 = s.cirkel (250, 200, 140); varcirkler = s.group (sirkel_1, sirkel_2); var ellipse = s.ellipse (275, 220, 170, 90); sirkler.attr (fyll: 'coral', fillOpacity: .6,); ellipse.attr (opacity: .4);
Nå må vi maskere sirklene med vår ellipse og legge til en annen fyllfarge til ellipsen:
sirkler.attr (fyll: 'coral', fillOpacity: .6, mask: ellipse); ellipse.attr (fill: '#fff', opacity: .8);
Fortsett med vårt eksempel, vi kan få dette øyet til å blinke, ved å legge til en animasjonsmetode. For å animere ellipsen vi nettopp har opprettet, endrer vi den vertikale radiusen fra 1 til 90 (som er den nåværende verdien) og tilbake igjen.
Lag animasjonen og pakk den inn i en funksjon som kalles blinke.
funksjon blink () ellipse.animate (ry: 1, 220, funksjon () ellipse.animate (ry: 90, 300);); ;
Dette sier at vi skal animere fra ry: 90 til ry: 1 og fra ry: 90 til ry: 1 med annen timing.
Opprett nå en setInterval å ringe blinkemetode en gang hvert tredje sekund, for å skape en blinkende effekt.
setInterval (blink, 3000);
Den endelige koden skal se slik ut:
var circle_1 = s.circle (300, 200, 140); varcirkel_2 = s.cirkel (250, 200, 140); // Gruppesirkler sammen var sirkler = s.group (sirkel_1, sirkel_2); var ellipse = s.ellipse (275, 220, 170, 90); // Legg fylle farge og opasitet til sirkel og bruk // maske sirkler.attr (fyll: 'coral', fillOpacity: .6, mask: ellipse); ellipse.attr (fill: '#fff', opacity: .8); // Lag en blinkende effekt ved å endre rx-verdien // for ellipse fra 90px til 1px og bakoverfunksjon blink () ellipse.animate (ry: 1, 220, funksjon () ellipse.animate (ry: 90 , 300);); ; // Tilbakekall blinkmetode en gang hvert tredje sekund setInterval (blink, 3000);
Som nevnt tidligere støttes disse funksjonene i moderne nettlesere: IE9+, Safari, Chrome, Firefox og Opera.
Snap.svg er tilgjengelig under en Apache 2 lisens, noe som betyr at den er helt åpen og helt gratis.
Snap.svg senker barrieren for noen ganske fantastiske SVG manipulasjon. Jeg håper du likte å følge med og at det er inspirert til å se nærmere på SVG!
