Animeer SVG’s met Javascript

In het begin van het internettijdperk was het al een hele prestatie als je een eigen webpagina had. En ook toen al moest je opvallen door met een creatieve website te komen. Met scriptjes om een klok op je website te tonen, of letters die het beeld in kwamen vliegen. Geluidjes, later JAVA-applets of Flash-animaties. Grote bedrijven kwamen met innovatieve en dure Flash-websites, waar je mond van openviel. De tijden zijn veranderd.

Als je nu animaties op je website wilt, om je verhaal te vertellen, om de website er net iets krachtiger uit te laten zien of om interactieve elementen aan te duiden, dan grijp je niet meer naar Flash. Afgezien van de ondersteuning onder desktop-browsers, wil je niet dat iemand die je website met een smartphone bezoekt, je pagina niet kan laden, of door z’n maandbundel heen is omdat de pagina een aantal MB groot is. Flash is dood. Zelfs de enige uiting die nog actief gebruik maakt van deze techniek, advertentiebanners op internet, wordt veelal geblokkeerd door een van de vele Adblocker-applicaties. Nee, dan moet je als creatief webbureau, adverteerder of bedrijf echt op zoek naar alternatieven.

Animaties zijn daarentegen helemaal in. Vooral animaties die op alle platformen, van desktop tot tablet en smartphone, snel en helder ogen. Met Javascript is dat dankzij een aantal uitgebreide scripts te bereiken en lijkt de enige limiet je fantasie. In de vorige artikelen zagen we al dat graphics te creëren zijn met code. SVG laat toe dit soort innovatieve animaties te maken, zonder dat het veel rekenkracht of dataverkeer kost, omdat de browser geen afbeelding, maar tekst inleest om de animatie te realiseren.

Kies je script

Javascript en SVG passen goed bij elkaar. Animeren met native SVG code, zoals in het vorige artikel, wordt al snel complex en bovendien onleesbaar. Wanneer je bijvoorbeeld een SVG pad wilt laten animeren naar een andere vorm, dan kun je al snel verdwaald raken in de grote hoeveelheid code die daarvoor nodig is. Met libraries als SnapSVG, Velocity en Bonsai, animeer je veelal CSS-attributen en kun je animaties ook eenvoudig aaneenrijgen. Je moet daarbij onderscheid maken tussen libraries die SVG’s kunnen manipuleren of SVG’s kunnen maken. Soms is beide mogelijk, maar een aantal libraries beperkt zich tot enkele functionaliteiten, zoals het animeren van lijnen (<path>-elementen) in Walkway.js of Vivus. Veel libraries zijn geschikt voor manipulatie van allerlei soorten HTML-elementen – niet alleen SVG, zoals het populaire Velocity.js. Het is even zoeken naar de juiste bibliotheek voor jouw project: wil je een complete set aan vormgegeven elementen zoals grafieken en loading-bars, wil je een enkele animatie realiseren, of wil je alle controle hebben? Let daarbij ook op de licentie (mag je een bibliotheek in een commercieel project gebruiken?) en kosten: de SVG-uitbreiding van het geweldige GSAP (MorphSVG) is bijvoorbeeld een betaalde bibliotheek. Met de browser-ondersteuning zit het meestal wel goed: juist veel Javascript-bibliotheken zullen veelvoorkomende problemen in oudere browsers, zoals Internet Explorer 10 en lager, opvangen. Toch is het natuurlijk goed om in elke browser te testen.

Ben je gewend om te animeren met jQuery, dan zullen veel Javascript-libraries niet veel moeilijkheden opleveren. Omdat dit artikel vooral gaat over animeren met SVG’s, zullen we in dit artikel ingaan op één library: BonsaiJS. Deze zeer complete aanvulling op Javascript, kan SVG’s zowel creëren als manipuleren en wordt ondersteund door alle grote browsers (IE9 en hoger). Daarnaast heeft de website een heldere documentatie. Wil je andere elementen kunnen manipuleren, dan zijn jQuery, Velocity, GSAP of TweenJS goede alternatieven. Om specifiek SVG’s te kunnen animeren zijn SnapSVG en SVGjs goede keuzes.

Elementen tekenen en animeren: een geanimeerde kroon!

Laten we beginnen met Bonsai. Het is bijna Koningsdag, dus tekenen we een kroon die we daarna voorzien van een eenvoudige animatie. We hebben gezien hoe SVG’s werken en hoe deze te animeren zijn. De Bonsai-library laat toe elementen te tekenen en te manipuleren en wordt ondersteund door alle grote browsers (voor Internet Explorer geldt versie 9 en hoger). Bonsai ondersteunt afbeeldingen, video’s en lettertypen, path morphing (<path> in SVG), keyframe-animaties en time-based animaties. Om de library aan je pagina toe te voegen kun je de volgende code gebruiken of download de laatste versie via Github.

<script src="http://cdnjs.cloudflare.com/ajax/libs/bonsai/0.4/bonsai.min.js"></script>

Maak daarnaast een nieuw Javascript-bestand aan. Met de volgende code wordt het Javascript-bestand ingeladen voor gebruik in Bonsai. We definiëren de URL naar de animatie, de grootte en het element waar de animatie ingeladen moet worden.

<div id="kroon"></div>
<script type="text/javascript">
   bonsai.run(document.getElementById('kroon'), {
      url: 'animatie.js',
      width: 200,
      height: 200
   });
</script>

In animatie.js gaan we de animatie creëren. Om te kijken hoe verschillende vormen werken, kun je het volgende stukje code in het bestand plaatsen. Het resultaat zie je hiernaast.

var square = new Rect(0, 0, 100, 100);
square.addTo(stage);
square.fill('#96be28');

Je ziet dat het toevoegen van een eenvoudige vorm, met een stukje gemakkelijk te begrijpen code gaat. In de variabele square wordt een SVG gemaakt van 100×100 pixels en toegevoegd aan de stage, die we eerder hebben gedefinieerd met bonsai.run. Daarnaast wordt het vlak gevuld met een kleur. Je kunt spelen met de volgende varianten om andere vormen te maken:

• new Rect(x, y, width, height, [cornerRadius])
• new Arc(centerX, centerY, radius, startAngle, endAngle, isAntiClockwise)
• new Circle(centerX, centerY, radius)
• new Ellipse(centerX, centerY, radiusX, radiusY)
• new Polygon(centerX, centerY, radius, sides)
• new Star(centerX, centerY, radius, rays, factor)

Met een stukje extra code laten het vierkant veranderen van vorm, positie en kleur. Je kunt een hele reeks aan eigenschappen animeren. Je ziet dat de animatie start na 1,5 seconde (1500ms) en 6 seconden duurt. Vernieuw de pagina om de animatie te zien.

var square = new Rect(0, 0, 100, 100);
square.addTo(stage);
square.fill('#96be28');
square.animate('6s', {
   x: 200,
   scaleY: 0.5,
   scaleX: 0.5,
   fillColor: 'orange'
}, {
   delay: '1500ms'
})

De elementen die we zagen in het SVG artikel krijg je zo eenvoudig op het scherm. Voor onze kroon verwijderen we de code in animatie.js weer en voegen het volgende

path

new Path()
.moveTo(10, 40)
.lineTo(20,55)
.lineTo(30,35)
.lineTo(40,55)
.lineTo(50,20)
.lineTo(60,55)
.lineTo(70,35)
.lineTo(80,55)
.lineTo(90,40)
.lineTo(85,80)
.lineTo(15,80)
.closePath()
.fill('orange')
.addTo(stage);
new Rect(15, 83, 70, 8)
.fill('orange')
.addTo(stage);
var circle1 = new Circle(10, 40, 5).fill('orange').addTo(stage);
var circle2 = new Circle(30, 30, 5).fill('orange').addTo(stage);
var circle3 = new Circle(50, 20, 5).fill('orange').addTo(stage);
var circle4 = new Circle(70, 30, 5).fill('orange').addTo(stage);
var circle5 = new Circle(90, 40, 5).fill('orange').addTo(stage);

Lees meer over Paths in de documentatie van Bonsai. Zoals je in het vorige artikel zag wordt op de ‘SVG-manier’ een lijn getekend en vervolgens gevuld met de kleur oranje. We voegen ook een extra <rect> toe aan de pagina voor de onderkant van de kroon en vijf cirkels op de juiste positie voor aan de top. Die onderdelen kunnen we nu animeren! Vernieuw de pagina met sneltoets F5 om de animatie te zien.

new Path()
.moveTo(10, 40)
.lineTo(20,55)
.lineTo(30,35)
.lineTo(40,55)
.lineTo(50,20)
.lineTo(60,55)
.lineTo(70,35)
.lineTo(80,55)
.lineTo(90,40)
.lineTo(85,80)
.lineTo(15,80)
.closePath()
.fill('white')
.addTo(stage)
.attr('y',40)
.animate('500ms', {y: 0, fillColor: 'orange'}, { delay: '1s' });

		new Rect(15, 100, 70, 8)
.fill('white')
.addTo(stage)
.animate('500ms', {y: 83, fillColor: 'orange'}, { delay: '1200ms' });

		var circle1 = new Circle(10, 0, 5).fill('#FFFFFF').addTo(stage).animate('650ms', {y: 40, fillColor: '#da5c25'}, { delay: '1400ms' });
var circle2 = new Circle(30, 0, 5).fill('#FFFFFF').addTo(stage).animate('650ms', {y: 30, fillColor: '#da5c25'}, { delay: '1500ms' });
var circle3 = new Circle(50, 0, 5).fill('#FFFFFF').addTo(stage).animate('650ms', {y: 20, fillColor: '#da5c25'}, { delay: '1600ms' });
var circle4 = new Circle(70, 0, 5).fill('#FFFFFF').addTo(stage).animate('650ms', {y: 30, fillColor: '#da5c25'}, { delay: '1700ms' });
var circle5 = new Circle(90, 0, 5).fill('#FFFFFF').addTo(stage).animate('650ms', {y: 40, fillColor: '#da5c25'}, { delay: '1800ms' });

In de bovenstaande code is aan elk element een animatie toegevoegd volgens de volgende structuur:

.animate(<speed>,{<elements>},{<properties>});

path

delay

Een mooie toevoeging in Bonsai is de zogenaamde Keyframe-animatie. Met

new KeyframeAnimation()

Voor onze kroon maken we de illusie van glinsteringen op de onderrand door sterren in- en uit te laden faden. Voeg de volgende code toe aan de code die we al hadden in

animatie.js

var centerX = 20;
for (i = 0; i < 4; i++) {
		  var ster = new Star(centerX, 87, 2,5,3).fill('#FFFFFF').addTo(stage);
			   centerX += 20;
			   new KeyframeAnimation(Math.random(2)+1+"s", {
			     '0%': { opacity: 0 },
			     '50%': { opacity: 1 },
			     '100%': { opacity: 0 }
			  }, {
			     repeat: 'Infinity',
			     delay: '2000ms'
			  }).play(ster);
		 }

	

Je ziet dat er vier sterren worden toegevoegd met

new Star()

Math.random(2)+1+"s"

repeat: 'Infinity'

Meer leren!

Met een beetje creativiteit kun je met Bonsai en andere Javascript-bibliotheken een geanimeerd logo, stijlvolle knoppen of zelfs een hele digitale wenskaart in elkaar programmeren. En dat allemaal zonder een afbeelding te gebruiken. Het resultaat van de animatie is zoals bij alle SVG's enkel wat code, waardoor dit soort animaties snel inlaadt, op zowel desktop als mobiele websites en applicaties. Wil je verder met Bonsai, neem dan rustig de documentatie door. Bekijk ook vooral een van deze voorbeelden op de website van Bonsai.

Dit was het laatste artikel in de reeks over SVG: een introductie, vormen en animaties in SVG code en animaties met Javascript.