Share
I denna handledning kommer vi att introducera Snap.svg, ett JavaScript-bibliotek som hjälper till att animera och manipulera SVG-innehåll. För att visa några av de tillgängliga funktionerna kommer vi att animera ett SVG-öga.
Snap.svg är ett JavaScript-bibliotek som gör det enkelt att skapa och manipulera SVG-grafik för moderna webbläsare. Det är efterträdaren till Dmitry Baranovskiys Raphaël; det mest populära Javascript-biblioteket för att arbeta med SVG.
Raphäel.js är ett bra bibliotek. Utgivet 2008 var den största vinsten sitt stöd för webbläsare från IE 5.5 och framåt. Att stödja så många webbläsare var dock begränsande och innebar att den inte kunde implementera de senaste utvecklingen, istället förlitar sig på en gemensam delmängd av SVG-funktioner.
Efter ett tag delades Raphäel.js-gruppen upp i två, en grupp som åberopade den för korsläsarkompatibilitet och den som använde den för att skapa SVG-enheter. Den senare gruppen krävde ändringar för att stödja fler SVG-funktioner som Raphäel.js inte kunde hantera.
Därför byggdes Snap.svg, skrivet helt från början av Dmitry Baranovskiy (av Adobe Web Platform Team), för att lättare kunna arbeta med SVG och använda det senaste som SVG kan erbjuda; funktioner som maskering, mönster, gradienter, grupper, animationer och mer.
Ta en titt på deras API-dokumentation och du kommer att se funktioner som mask, grupp, gradient, filter, animera och mönster, allt du kan ansöka om SVGs.
Snap.svg hjälper dig att skapa grafik, men det kan också fungera med befintlig SVG. Det betyder att ditt SVG-innehåll inte nödvändigtvis måste skapas med Snap.svg. Du kan också manipulera grafik skapad med verktyg som Adobe Illustrator, Inkscape eller Sketch..
För det första måste du ladda ner Snap.svg. Med det gjort hittar du följande i arkivet:
Har laddat ner Snap.svg-resurserna, starta ett nytt webbprojekt som måste inkludera:
Skapa en HTML-mall och referera "scripts / snap.svg.js" och "scripts / main.js" -skript någonstans på din sida.
Efter det, placera en behållare inuti och ge det ett id. Du borde ha något lite så här:
Introducerar Snap.svg
Låt oss nu hoppa direkt till kodningen. För att följa med behöver du lite grundläggande JavaScript-kunskap och förståelse, men det spelar ingen roll för mycket eftersom vi inte går för djupt med denna handledning.
För det första ska vi initialisera Snap och peka på svg just skapad och tilldela den till en variabel. I vårt fall heter variabeln s
Accentsconagua
var s = Snap ("# svg");Från och med nu, inom s variabel får vi tillgång till alla Snap.svg metoder. Låt oss till exempel säga att vi vill skapa en cirkel eller en rektangel.
// Circle med 80px radie var cirkel = s.circle (90,120,80); // Kvadrat med 160px sidbredd var kvadrat = s.rect (210,40,160,160); // Ellipse med 80px vertikal radie och 50px horisontell radie var ellipse = s.ellipse (460,120,50,80);
Koden ovan kommer att ge följande resultat:
Som du kan se från bifogade skärmdump, har blankorna som standard en # 000 (svart) fyllfärg utan någon annan styling. Låt oss interagera med dem och lägga till några fler stylingattribut, till exempel fyllfärg, fyll opacitet, slagfärg, slagbredd, strokeopacitet. Du kan kontrollera SVG Attributes för mer information.
circle.attr (fill: 'coral', stroke: 'coral', strokeOpacity: .3, strokevidde: 10); square.attr (fill: 'lightblue', stroke: 'lightblue', strokeOpacity: .3, strokeWidth: 10); ellipse.attr (fill: 'mediumturquoise', stroke: 'mediumturquoise', strokeOpacity: .2, strokevidde: 10);
Dessa attribut har gjort våra SVG-former mycket trevligare!
Låt oss ta vårt exempel och gå utöver grunderna.
Snap.svg använder en kraftfull vapenkallad grupp, som, som namnet antyder, grupperar vektorer tillsammans, vilket gör dem till en form. Du kan gruppera så många former som du vill genom att lägga till dem som en lista.
Låt oss skapa två cirklar, gruppera dem och sänka fyllningen i varje cirkel för att tydligare se vad som händer.
varcirkel_1 = s.cirkel (200, 200, 140); varcirkel_2 = s.cirkel (150, 200, 140); varcirklar = s.group (cirkel_1, cirkel_2); circles.attr (fill: 'coral', fillOpacity: .6);
Låt oss nu säga att vi vill skapa ett imaginärt öga med hjälp av de grupperade elementen vi redan har gjort. Det kan vi göra med mask. Först måste vi skapa en extra ellips och placera den i mitten av gruppen.
varcirkel_1 = s.cirkel (300, 200, 140); varcirkel_2 = s.cirkel (250, 200, 140); varcirklar = s.group (cirkel_1, cirkel_2); var ellipse = s.ellipse (275, 220, 170, 90); circles.attr (fill: 'coral', fillOpacity: .6,); ellipse.attr (opacitet: .4);
Nu måste vi maskera cirklarna med vår ellipsa och lägga till en annan fyllfärg till ellipsen:
cirklar.attr (fyll: 'korall', fillOpacity: .6, mask: ellipse); ellipse.attr (fill: '#fff', opacitet: .8);
Fortsatt med vårt exempel kan vi få ögat att blinka, genom att lägga till en animerad metod. För att animera ellipsen som vi just skapat ändrar vi den vertikala radien från 1 till 90 (vilket är nuvärdet) och tillbaka igen.
Skapa animeringen och linda den inuti en funktion som heter blinka.
funktion blink () ellipse.animate (ry: 1, 220, funktion () ellipse.animate (ry: 90, 300);); ;
Detta säger att vi kommer att animera från ry: 90 till ry: 1 och från ry: 90 till ry: 1 med olika timing.
Skapa nu en setInterval att ringa blinkametod en gång var tredje sekund, för att skapa en blinkande effekt.
setInterval (blink, 3000);
Den slutliga koden ska se ut så här:
varcirkel_1 = s.cirkel (300, 200, 140); varcirkel_2 = s.cirkel (250, 200, 140); // Gruppcirklarna tillsammans var cirklar = s.group (circle_1, circle_2); var ellipse = s.ellipse (275, 220, 170, 90); // Lägg till fyllnadsfärg och opacitet i cirkel och tillämpa // maskcirklarna .attr (fyll: 'korall', fillOpacity: .6, mask: ellipse); ellipse.attr (fill: '#fff', opacitet: .8); // Skapa en blinkeffekt genom att ändra rx-värdet // för ellips från 90px till 1px och bakåtfunktion blink () ellipse.animate (ry: 1, 220, funktion () ellipse.animate (ry: 90 , 300);); ; // Återkalla blinkningsmetod en gång var tredje sekund setInterval (blink, 3000);
Som tidigare nämnts stöds dessa funktioner i moderna webbläsare: IE9+, Safari, Chrome, Firefox och Opera.
Snap.svg är tillgängligt under en Apache 2-licens vilket innebär att den är helt öppen och helt gratis.
Snap.svg sänker barriären för några ganska fantastiska SVG-manipulationer. Jag hoppas att du njöt av att följa med och att det inspirerade dig att titta längre in på SVG!
