Animeren met Snap.svg

Het animeren van SVG-afbeeldingen is een fluitje van een cent. Er zijn verschillende technieken voorhanden. Denk hierbij aan de animatie-attributen uit de SVG-specificatie (SMIL), CSS-animaties of door middel van een externe JavaScript-bibliotheek. In deze blog geef ik mijn voorkeur en een korte introductie.

Mijn voorkeur ging altijd uit naar SMIL. Deze techniek is eenvoudig en tegelijkertijd erg krachtig. Binnen de SVG kan je met animatie-attributen de meest complexe animaties maken. Met het animateMotion attribuut is het zelfs mogelijk om een motion path animatie effect te creëren. Hiermee kan je een SVG-element een bepaald pad laten volgen. Helaas lijkt de SMIL-techniek nog niet volledig te zijn geaccepteerd. Chrome was zelfs van plan om deze techniek volledig te laten vervallen.

Gelukkig komen er steeds meer modules in CSS beschikbaar. Er is bijvoorbeeld al een CSS-specificatie voor motion path. In veel cases is CSS daarom nu al een geschikte oplossing. Maar het is helaas nog niet overal de beste oplossing. Shape morphing is bijvoorbeeld niet mogelijk met CSS. Bij shape morphing transformeer je een cirkel bijvoorbeeld naar een vierkant. Ook zijn opeenvolgende animaties lastig realiseerbaar. Een JavaScript-oplossing is daarom soms onvermijdelijk. Populaire SVG JavaScript-bibliotheken zijn Velocity.js, Snap.svg en Greensock. Gezien de flexibiliteit en eenvoud van Snap.svg gaat daar mijn voorkeur naar uit. Genoeg introductie, laten we wat voorbeeld code laten zien.

In dit voorbeeld geef ik een cartoon een hip kapsel. Een hip kapsel in de oranje Pronamic-kleur, een kleur om blij van te worden. De cartoon krijgt daarom een blije uitstraling (motion path) na het krijgen van dit kapsel. Ik gebruik Sketch voor het maken van de cartoon. We embedden de SVG in een HTML-document en integreren de Snap.svg JavaScript-bibliotheek om te kunnen communiceren met deze SVG.

Allereerst zullen we de SVG-afbeelding moeten koppelen aan Snap.svg. Vervolgens kunnen we de te animeren elementen benaderen met de select functie.

var cartoon = Snap( '.cartoon' );

hair = cartoon.select( '.hair' );
mouth = cartoon.select( '.mouth' );

De geïntegreerde SVG bevat alle te animeren elementen. We willen echter beginnen met een cartoon zonder kapsel. We passen daarom een aantal standaard waarden aan met de attr functie.

hair.attr( {
opacity: 0,
transform: 'translate(0, -120)',
} );

Je kan alle SVG-attributen hiermee benaderen en aanpassen. Nu kan het leuke werk beginnen. We gaan de cartoon animeren. We gebruiken hiervoor de animate functie. Deze functie accepteert een 4-tal paramaters.

• attr: De SVG-attributen die geanimeerd moeten worden.
• duration: De duur van de animatie.
• easing: Het animatie effect.
• callback: Een callback functie die uitgevoerd moet worden als de animatie is afgelopen.

We voeren in dit voorbeeld een 3-tal animatie effecten uit:

1. We geven de cartoon een kapsel (opacity en transform)
2. We maken het kapsel oranje (fill)
3. We geven de cartoon een lach op het gezicht (motion path)

We voeren de animatie uit bij een onclick event (animateSvg). Met de callback functies splitsen we de verschillende animaties op zodat het opeenvolgend afgespeeld wordt.

var animateSvg = function() {
hair.animate( {
opacity: 1,
transform: 'translate(0)',
}, 600, mina.bounce, changeColor );
}

function changeColor() {
setTimeout( function() {
hair.animate( {
fill: '#f9461c',
}, 400, mina.easeout, likePronamic );
}, 500 );
}

function likePronamic() {
setTimeout( function() {
mouth.animate( {
d: 'M142,465.714844 C160.314453,481.651693 179.647786,489.620117 200,489.620117 C220.352214,489.620117 239.526487,481.651693 257.522821,465.714844',
}, 800, mina.easeout );
}, 1000 );
}

Voilà, het resultaat is een soepele SVG-animatie. De mogelijkheden zijn eindeloos. Benieuwd wat deze techniek voor jouw project kan betekenen? Neem contact met ons op.