s'agit
d'éviter de charger toutes les animations présentes sur cette page,
cela serait bien trop lourd.</p>
-<p>Nous présentons, dans la section XX, le code qui permet de charger
-l'animation sur demande.</p>
+<p>Nous présentons, dans la section <a
+href="#chargement-différé">Chargement différé</a>, le code qui permet de
+charger l'animation sur demande.</p>
</div>
## Installation
`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 :
+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
</div>
-Il est possible de différer le chargement de l'animation en créant une fonction Javascript.
+#### Chargement différé
+
+On peut laisser le chargement d'une animation à la demande en créant une
+fonction Javascript.
~~~~~~~ { .javascript }
function charge_anim2() {
}
~~~~~~~
-Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant, à
-l'internaute, le chargement de l'animation...
+Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant
+justement le chargement de l'animation...
~~~~~~~ { .html }
-<div id="anim2"
+<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>
~~~~~~~
-On peut en profiter pour adapter le *style* des éléments englobants.
+Dans le même temps, le *style* des éléments englobants a été adapté.
-<div id="anim2" style="margin:10px auto;padding:10px;width:350px;border:2px solid #AAA;border-radius:4px">
+<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 id="anim2_boutons"><button onclick="charge_anim2()">Charger l'animation</button></div>
</div>
### 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-dessous 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*
+Le fichier `SVGAnimation.js` contient le constructeur `Controle` qui est
+la base des *players*. S'il est invoqué directement, il fournit un
+contrôle *simpliste* de l'animation, comme cela a été vu
+[ci-dessus](#côté-javascript).
+
### `SVGPlayerOne.js`
### `SVGPlayerButtons.js`