Participants : Chupin Maxime, Sarlat Jean-Michel.

Interface du dépôt Git : http://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=summary

L'objectif est de développer, en particulier, du code Javascript afin de présenter des animations de fichiers SVG produits, en particulier, par MetaPost. Ce développement n'étant pas tout à fait prédéterminé, il sera constitué à partir de l'exploration de différents scénarios de présentation de ces animations et des modes de construction des fichiers SVG.

Installation

Le fichier SVGAnimation.js (que l'on supposera dans un répertoire nommé js) est à charger dans la page html en mettant les lignes suivantes :

<script type="text/javascript" src="js/SVGAnimation.js"></script>

Principe

Le principe est simple : on dispose d'un ensemble d'images au format SVG qui constituent, par une suite chronologique, une animation à visionner. La libraire SVGAnimation permet de visionner cette animation dans une page HTML grâce à JavaScript.

La famille d'images

Les différentes images composant l'animation doivent se nommer avec un prefixe suivi d'un nombre (indice), celui-ci pouvant être formater de différente façons :

monfichier-1.svg  monfichier-2.svg monfichier-3.svg ...

ou, autre exemple :

monfichier-001.svg  monfichier-002.svg monfichier-003.svg ...

Nous verrons comment gérer le formatage de l'indice des images dans les sections suivantes.

L'utilisation

Côté HTML

La librairie SVGAnimation définit le prototype javascript Animation. Pour l'utiliser il faut déclarer une balise HTML div avec un identifiant (id) unique. Choisissons pour l'exemple XXXX. À l'intérieur de ces balises, il faut :

• une balise img contenant un image svg qui servira de vignette à l'animation;
• une balise div avec l'identifiant id="XXXX_message" où XXXX est l'identifiant de la balise englobante. Dans cette balise message, on y met, si on le souhaite, un message à afficher avant le chargement de l'animation;
• une balise div avec l'identifiant id="XXXX_boutons".

En supposant que les images SVG se trouvent dans un répertoire nommé svg, voici un exemple d'une telle structure :

<div id="anim1">
  <img src="svg/ellipsographe-1.svg" alt="animation1"/>
  <div class="message" id="anim1_message">Chargement</div>
  <div id="anim1_boutons"></div>
</div>

Côté JavaScript

Une fois qu'on a la structure HTML présentée ci-dessus, il est nécessaire d'ajouter un peu de code JavaScript pour permettre à l'animation de se jouer.

Construire l'objet Animation

Le constructeur du prototype JavaScript s'utilise, pour l'exemple donné à la section précédente, de la façon suivante :

var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
anim.loopOnload();

XXXX est l'identifiant de la balise div HTML englobante, svg/ellipsographe- est le préfixe dont on a parlé plus haut, 1 est l'indice de la première image à animer, et 91 l'indice de la dernière.

anim.loopOnload() permet le chargement de l'animation.

Une fois celle-ci chargée, il faut en permettre la lecture qui se fait grâce à un nouvel objet nommé Controle. Ce contrôle s'utilise en fait comme ceci :

var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
anim.loopOnload();
var player = new Controle(anim);
player.connect();

Nous verrons par la suite comment personnaliser le contrôle de la lecture de l'animation.

Tout ceci n'est toujours pas suffisant car il faut exécuter ce code JavaScript. Ceci peut être fait grâce à JQuery par exemple, en exécutant ces quatre lignes de code à l'ouverture de la fenêtre :

$(window).load(function() {
    var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
    anim.loopOnload();
    var player = new Controle(anim);
    player.connect();
});

Bien sûr, ceci nécessite le chargement, dans la page HTML, de la librairie JQuery.

Le résultat

Tout ceci donne le code suivant

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="../SVGAnimation.js"></script>
<script type="text/javascript">
$(window).load(function() {
    var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
    anim.loopOnload();
    var player = new Controle(anim);
    player.connect();
});
</script>
<!--[...]-->
<div id="XXXX">
  <img src="svg/ellipsographe-1.svg" alt="animation1"/>
  <div class="message" id="XXXX_message">Chargement...</div>
  <div id="XXXX_boutons"></div>
</div>

dont l'affichage est :

Chargement...

Chargement différé

On peut laisser le chargement d'une animation à la demande en créant une fonction Javascript.

function charge_anim2() {
  var a = new Animation('anim2','svg/ellipsographe-',1,91);
  a.loopOnload();
  var b = new Controle(a);
  b.connect();
}

Fonction qui sera liée à l'événement onclick d'un bouton proposant justement le chargement de l'animation...

<div id="anim2"
  style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
 <div class="message" id="anim2_message">Ellipsographe</div>
 <div id="anim2_boutons"><button onclick="charge_anim2();">Charger l'animation</button></div>
</div>

Dans le même temps, le style des éléments englobants a été adapté.

Ellipsographe

Charger l'animation

Les paramètres

L'objet Animation ne possède que deux propriétés configurables, autres que celles (4) qui lui sont passées en argument.

• delai (valeur par défaut : 50) — C'est la durée, en millisecondes, entre deux images.

var a = new Animation('anim','svg/pre',1,100);
a.delai = 200;
a.loopOnload();

Ceci fixera le défilement à 5 images/s. Un player comme ceux que nous vous proposons ci-dessus peut modifier cette valeur.

• pad (valeur par défaut : 0) — Ce paramètre n'a d'effet que s'il est supérieur ou égal à 2, il permet de fixer la longueur des index des images en complétant avec des 0.

var a = new Animation('anim','svg/pre',1,100);
a.pad = 3;
a.loopOnload();

Les images chargées seront, successivement, svg/pre001.svg, svg/pre002.svg, ..., svg/pre100.svg.

Les players

SVGPlayerOne.js

SVGPlayerButtons.js

Exemples d'utilisation