X-Git-Url: https://melusine.eu.org/syracuse/G/git/?a=blobdiff_plain;f=doc%2Fpage.md;h=33e08d51b6d79ffb0d148299fc756e171cabf0c5;hb=f1b6847f4fde160a3b56c252201670205885f932;hp=9e3503b736c8c0e9b14ca5953755a779e4cc8f4f;hpb=6a9b3b4d49e62b9a57eff23c820c74141f1c0a05;p=svganimation.git diff --git a/doc/page.md b/doc/page.md index 9e3503b..33e08d5 100644 --- a/doc/page.md +++ b/doc/page.md @@ -9,7 +9,7 @@ player.connect(); } function charge_anim2() { - var a = new Animation('anim2'); + var a = new Animation('anim2','../ellipsographe/svg/ellipsographe-',1,91); a.loopOnload(); var b = new Controle(a); b.connect(); @@ -41,8 +41,9 @@ 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 @@ -91,7 +92,8 @@ 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 : +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 @@ -202,22 +204,25 @@ dont l'affichage est : -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() { - var a = new Animation('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, à -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 } -
animation1
Ellipsographe
@@ -225,18 +230,42 @@ l'internaute, le chargement de l'animation...
~~~~~~~ -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é. -
+
animation1
Ellipsographe
-
+
### 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`