Share
In deze tutorial introduceren we Snap.svg, een JavaScript-bibliotheek die helpt bij het animeren en manipuleren van SVG-inhoud. Om enkele van de beschikbare functies te demonstreren, gaan we een SVG-oog animeren.
Snap.svg is een JavaScript-bibliotheek waarmee u eenvoudig SVG-afbeeldingen voor moderne browsers kunt maken en manipuleren. Het is de opvolger van Raphaël van Dmitry Baranovskiy; de meest populaire JavaScript-bibliotheek voor het werken met SVG.
Raphäel.js is een geweldige bibliotheek. Uitgebracht in 2008, de grootste overwinning was de ondersteuning voor browsers vanaf IE 5.5. Het ondersteunen van zoveel browsers was echter beperkend en betekende dat het de nieuwste ontwikkelingen niet kon implementeren, in plaats daarvan vertrouwde op een gemeenschappelijke subset van SVG-functies.
Na een tijdje de Raphäel.js-gemeenschap verdeeld in twee, één groep die erop vertrouwde voor compatibiliteit met andere browsers, en een andere die deze gebruikte voor het maken van SVG's. Deze laatste groep eiste wijzigingen om meer SVG-functies te ondersteunen die Raphäel.js niet aankon.
Vandaar dat Snap.svg is gebouwd, helemaal opnieuw geschreven door Dmitry Baranovskiy (van het Adobe Web Platform-team), om gemakkelijker met SVG te werken en het nieuwste dat SVG kan bieden te gebruiken; functies zoals maskeren, patronen, verlopen, groepen, animaties en meer.
Bekijk hun API-documentatie en u zult functies zien zoals masker, groep, verloop, filter, animatie en patroon, die u allemaal kunt toepassen op SVG's.
Snap.svg helpt je bij het genereren van afbeeldingen, maar het kan ook werken met bestaande SVG. Dit betekent dat uw SVG-inhoud niet noodzakelijk met Snap.svg hoeft te worden gemaakt, u kunt ook afbeeldingen bewerken die zijn gemaakt met hulpmiddelen zoals Adobe Illustrator, Inkscape of Sketch.
Allereerst moet u Snap.svg downloaden. Met dat gedaan, vindt u het volgende in het archief:
Nadat u de Snap.svg-bronnen hebt gedownload, begint u een nieuw webproject dat het volgende moet bevatten:
Maak een HTML-sjabloon en verwijs naar "scripts / snap.svg.js" en "scripts / main.js" -scripts ergens op uw pagina.
Hierna plaats je een container in de en geef het een id. Je zou iets een beetje als dit moeten hebben:
Introductie van Snap.svg
Laten we nu direct naar de codering springen. Om dit te volgen, heb je basis JavaScript-kennis en -begrip nodig, maar het maakt niet zoveel uit omdat we niet te diep gaan met deze tutorial.
Allereerst initialiseren we Snap, wijzend naar de svg zojuist gemaakt en toewijzen aan een variabele. In ons geval wordt de variabele gebeld s
Accentsconagua
var s = Snap ("# svg");Vanaf nu, binnen de s variabele hebben we toegang tot alle Snap.svg-methoden. Stel dat we bijvoorbeeld een cirkel of een rechthoek willen maken.
// Cirkel met 80px radius var circle = s.circle (90,120,80); // Vierkant met 160px zijbreedte var square = s.rect (210,40,160,160); // Ellips met 80px verticale straal en 50px horizontale straal var ellipse = sellipse (460,120,50,80);
De bovenstaande code genereert het volgende resultaat:
Zoals je kunt zien in bijgevoegd screenshot, hebben de vormen standaard een # 000 (zwart) vul de kleur zonder een andere stijl. Laten we er interactie mee hebben en wat meer stylingattributen toevoegen, zoals opvulkleur, vuldekking, lijnkleur, lijnbreedte, slagdekking. U kunt SVG-attributen bekijken voor meer informatie.
circle.attr (fill: 'coral', stroke: 'coral', strokeOpacity: .3, strokeWidth: 10); square.attr (fill: 'lightblue', stroke: 'lightblue', strokeOpacity: .3, strokeWidth: 10); ellipse.attr (fill: 'mediumturquoise', stroke: 'mediumturquoise', strokeOpacity: .2, strokeWidth: 10);
Deze attributen hebben onze SVG-vormen veel mooier gemaakt!
Laten we ons voorbeeld nemen en verder gaan dan de basis.
Snap.svg gebruikt een krachtig wapen genaamd groep, dat, zoals de naam suggereert, vectoren samen groepeert, waardoor ze één vorm vormen. U kunt zoveel vormen als u wilt groeperen door ze als een lijst toe te voegen.
Laten we twee cirkels maken, groeperen en de vulling van elke cirkel verlagen om beter te visualiseren wat er aan de hand is.
var circle_1 = s.circle (200, 200, 140); var circle_2 = s.circle (150, 200, 140); var circles = s.group (circle_1, circle_2); circles.attr (fill: 'coral', fillOpacity: .6);
Laten we nu zeggen dat we een denkbeeldig oog willen maken met de gegroepeerde elementen die we al hebben gemaakt. We kunnen dit doen met behulp van masker. Eerst moeten we een extra ellips maken en deze in het midden van de groep plaatsen.
var circle_1 = s.circle (300, 200, 140); var circle_2 = s.circle (250, 200, 140); var circles = s.group (circle_1, circle_2); var ellips = sellipse (275, 220, 170, 90); circles.attr (fill: 'coral', fillOpacity: .6,); ellipse.attr (opacity: .4);
Nu moeten we de cirkels maskeren met onze ellips, door een andere vulkleur toe te voegen aan de ellips:
circles.attr (fill: 'coral', fillOpacity: .6, mask: ellip); ellipse.attr (fill: '#fff', onduidelijkheid: .8);
Als we doorgaan met ons voorbeeld, kunnen we dit oog laten knipperen door een animatiemethode toe te voegen. Om de ellips die we zojuist hebben gemaakt te animeren, wijzigen we de verticale straal van 1 naar 90 (dat is de huidige waarde) en weer terug.
Maak de animatie en pak deze in een functie genaamd knipperen.
functie knippert () ellipse.animate (ry: 1, 220, function () ellipse.animate (ry: 90, 300);); ;
Dit stelt dat we gaan bezielen vanuit ry: 90 naar ry: 1 en van ry: 90 naar ry: 1 met verschillende timing.
Maak nu een setInterval om de. te bellen knipperenmethode om de drie seconden, om een knipperend effect te creëren.
setInterval (knipperen, 3000);
De definitieve code zou er als volgt uit moeten zien:
var circle_1 = s.circle (300, 200, 140); var circle_2 = s.circle (250, 200, 140); // Groepeert cirkels samen var cirkels = s.groep (circle_1, circle_2); var ellips = sellipse (275, 220, 170, 90); // Vulkleur en -dekking toevoegen om te omcirkelen en // het masker circles.attr toepassen (fill: 'coral', fillOpacity: .6, mask: ellip); ellipse.attr (fill: '#fff', onduidelijkheid: .8); // Creëer een knippereffect door de rx-waarde // voor ellips van 90px tot 1px aan te passen en omgekeerd functie knippert () ellipse.animate (ry: 1, 220, function () ellipse.animate (ry: 90 , 300);); ; // Herhaal de knippermethode eenmaal per 3 seconden setInterval (knipper, 3000);
Zoals eerder vermeld, worden deze functies ondersteund in moderne browsers: IE9+, Safari, Chrome, Firefox en Opera.
Snap.svg is beschikbaar onder een Apache 2-licentie, wat betekent dat het volledig open-source en volledig gratis is.
Snap.svg verlaagt de barrière voor een behoorlijk verbluffende SVG-manipulatie. Ik hoop dat je het leuk vond om mee te gaan en dat het je heeft geïnspireerd om verder te kijken in SVG!
