SVG animeren met vivus.js

Bij het openen van deze pagina verschijnt er een tekening van een paar vlinders en wat blaadjes. De tekening wordt lijntje voor lijntje getekend. Als je op de gerede tekening klikt wordt die weer opnieuw getekend.
Op deze bladzijde wordt uitgelegd hoe je dat doet.

Dit is een bewerking / vereenvoudiging van een workshop door Mark Shufflebottom, die ik heb gevonden in Webdesigner Magazine nr. 88 (juli 2016), pag. 46 e.v.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Voor deze website is niet-essentiële code verwijderd. De code van het voorbeeld kun je downloaden om zelf te gebruiken.

• Er worden drie items besproken:
  1. De werking van het script.
  2. Mogelijkheden van vivus.js.
  3. Toepassen in je eigen site.
   
• De werking van het script
• De code bestaat uit HTML, CSS en JavaScript.
   
• De HTML is één enkele <div>-tag, die alleen wordt gebruikt om de tekening in het document te positioneren. Hier is alleen het oude attribuut align="center" gebruikt.
• De tekening wordt gemaakt met SVG. Binnen de <svg>-tag zijn alleen <path>-tags gebruikt. Meer informatie over SVG vind je in het item:
    Graphics op je website II: <svg>-tag.
   
• De <svg>-tag zelf heeft een aantal attributen:
  
  • id="Natuur" Dit wordt gebruikt door vivus.js om te communiceren met de <svg>-tag (lees: het plaatje).
  • class="Natuur" Dit wordt gebruikt om de hoogte van het plaatje in het document vast te leggen.
  • xmlns="http://www.w3.org/2000/svg" Dit is een verwijzing naar de standaard waarin SVG is vastgelegd. Dit is noodzakelijk omdat SVG is geschreven in xml, niet in html.
  • height="400" Hiermee wordt de hoogte van het plaatje binnen de <svg>-tag bepaald, nl. 400px. In het document is de hoogte van het plaatje vastgelegd op 250px (via de klasse Natuur). De verschaling wordt geregeld door de browser.
  • viewbox="0 0 363.59 224.88" Dit zijn de coördinaten van de linker bovenhoek resp. de rechter onderhoek van het plaatje.
  • onclick="nat.reset().play();" Door op het plaatje te klikken wordt het plaatje gewist (reset()) en vervolgens opnieuw getekend (play()).
    nat is de de naam van het vivus-object waar het plaatje in zit.
   
• De CSS, in de klasse Natuur, legt alleen de hoogte van het plaatje in het document vast. Hier is dat 250px.
  Verdere opmaak is hier niet nodig.
   
• vivus.js is een JavaScript bibliotheek die het mogelijk maakt om SVG lijn-tekeningen geanimeerd op het scherm te laten verschijnen. Het gaat hier dus alleen om lijnen, niet om opgevulde vlakken.
• Het is gemaakt door een webdeveloper uit Londen die zich verschuilt achter de naam Maxwellito. Zijn projecten vind je op GitHub. Een beknopte beschrijving van vivus.js staat op maxwellito.github.io/vivus/.
• In het voorbeeld op deze pagina maakt het JavaScript in de body een vivus-object aan uit de HTML van het svg-plaatje. Dat gebeurt via het id.
• Er worden daarbij twee object-parameters ingesteld:
  
  • type: 'oneByOne' : Dit zorgt ervoor dat de lijntjes één voor één worden getekend.
  • duration: 350 : Het tekenen van het plaatje duurt 350 frames (lees: stappen). Hoe lager het aantal frames, hoe sneller de tekening wordt gemaakt. Default-waarde is 200.
• Het JavaScript dat het object maakt moet na de <svg>-tag komen, omdat het JavaScript refereert aan het id van het plaatje.
   
• Mogelijkheden van vivus.js.
• vivus.js heeft heel veel mogelijkheden. Het overzicht hier onder is niet volledig maar geeft een goede indruk van wat er mogelijk is.
• Animatie functies:
  
  • delayed : Dit is de default-waarde. Alle <path>-elementen worden tegelijkertijd getekend, maar met een kleine vertraging bij het begin.
  • sync : Alle <path>-elementen worden tegelijkertijd getekend. Ze beginnen en eindigen gelijk. Daardoor worden korte lijnen langzaam getekend en lange lijnen worden snel getekend.
  • oneByOne : De <path>-elementen worden één voor één na elkaar getekend. Deze methode wordt op deze pagina gebruikt.
• De animatie van elk apart item kan worden overschreven door een andere. De aanpak lijkt op de transition-timing functions in CSS, maar hier wordt JavaScript ingezet om het effect te bereiken. Timing functies zijn:
  
  • linear, ease, ease-in, en ease-out : Werken hetzelfde als in CSS.
  • ease-out bounce : Gelijk aan ease-out, maar de animatie komt stuiterend tot stilstand.
• Een volledig overzicht van de mogelijkheden vind je op de GitHub pagina van dit project.
   
• Toepassen in je eigen site
• vivus.js gebruiken is lastig. Lees jezelf goed in over deze JavaScript bibliotheek en experimenteer wat voor je je waagt aan productiewerk.
   
• Download vivus.js van GitHub. Klik op de groene knop met de tekst"Clone or download", en daarna op "Download ZIP". Pak het bestand uit. Zoek de file vivus.min.js op en zet hem bij het HTML-document. De rest is niet nodig.
• Regel een SVG-plaatje dat alleen <path>-tags bevat.
• Download de zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<style>
.Natuur {
  height:250px;
}
</style>
<script src="vivus.min.js"></script>

(Zet dit in de <BODY> op de plaats waar de geanimeerde tekening moet komen).

<div align="center">
<svg id="Natuur" class="Natuur" xmlns="http://www.w3.org/2000/svg"
    height="400" viewBox="0 0 363.59 224.88"
    onclick="nat.reset().play();">
  <path d="M380.85, ... ,90.12Z" transform="translate(-311.61 -84.96)"
    style="fill:none; stroke:#de3f26;
    stroke-linecap:round; stroke-linejoin:round; fill-rule:evenodd" />
  <path d="M626.49, ... ,3.63,0" transform="translate(-311.61 -84.96)"
    style="fill:none; stroke:#f7b818;
    stroke-linecap:round; stroke-linejoin:round; fill-rule:evenodd" />
  <path d="M360.49, ... ,174Z" transform="translate(-311.61 -84.96)"
    style="fill:none; stroke:#8d191b;
    stroke-linecap:round; stroke-linejoin:round; fill-rule:evenodd" />
  <path d="M665.08, ... ,195.09Z" transform="translate(-311.61 -84.96)"
    style="fill:none; stroke:#286c36; stroke-miterlimit:10" />
</svg>
</div>
<script>
var nat = new Vivus('Natuur', {
  type: 'oneByOne',
  duration: 350
});
</script>

Downloaden:
 
Druk op de knop:  File: voorb336.zip, 5223 bytes.

Opmerking:
 
Een veel eenvoudiger manier om SVG te animeren vind je in het item SVG animeren met CSS.