Les différents exemples se charge en cliquant sur le bouton
-dédié. Ceci **n'est pas** le comportement par défaut. Il s'agit
+dédié. Ceci **n'est pas** le comportement par défaut, c'est du code
+JavaScript qui permettra de choisir quand l'animation se charge. Il
+s'agit
d'éviter de charger toutes les animations présentes sur cette page,
cela serait bien trop lourd.
-
Nous présentons, dans la section XX, le code qui permet de charger
-l'animation sur demande.
+
Nous présentons, dans la section Chargement différé, le code qui permet de
+charger l'animation sur demande.
## 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 :
+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 :
-
-La librairie `SVGAnimation.js` dépend de `JQuery`, il faut donc charger cette bibliothèque JavaScript avant.
## 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.
+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* suivit d'un tiret puis d'un nombre (celui-ci pouvant être
-formater de différente façons).
+*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
+ou, autre exemple :
monfichier-001.svg monfichier-002.svg monfichier-003.svg ...
@@ -68,24 +84,192 @@ abondamment pour la production d'animations.
-## L'objet `Animation`
+## L'utilisation
+
+### Côté HTML
La librairie `SVGAnimation` définit le *prototype* javascript
-`Animation`. Pour l'utiliser il faut déclarer
+`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 :
+
+~~~~~~~ { .html }
+
+
+#### Le résultat
+
+Tout ceci donne le code suivant
+
+~~~~~~~ { .html }
+
+
+
+
+
+
+
Chargement...
+
+
+~~~~~~~
+
+dont l'affichage est :
+
+
+
+
Chargement...
+
+
+
+
+#### Chargement différé
+
+On peut laisser le chargement d'une animation à la demande en créant une
+fonction Javascript.
+
+~~~~~~~ { .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...
+
+~~~~~~~ { .html }
+
+
+
Ellipsographe
+
+
+~~~~~~~
+
+Dans le même temps, le *style* des éléments englobants a été adapté.
+
+
-
Ellipsographe
-
+
Ellipsographe
+
-### L'utilisation
### 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.
+
+~~~{.javascript}
+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.
+
+~~~{.javascript}
+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