X-Git-Url: https://melusine.eu.org/syracuse/G/git/?a=blobdiff_plain;f=doc%2Fpage.md;h=33e08d51b6d79ffb0d148299fc756e171cabf0c5;hb=f1b6847f4fde160a3b56c252201670205885f932;hp=b1816df56fc5ed4e880b358c22541f07876c468a;hpb=bb219b859367d3cbc212b5d4ad0dfd3ba6356af5;p=svganimation.git diff --git a/doc/page.md b/doc/page.md index b1816df..33e08d5 100644 --- a/doc/page.md +++ b/doc/page.md @@ -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,7 @@ 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; @@ -203,7 +204,10 @@ 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() { @@ -214,8 +218,8 @@ 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 }
~~~~~~~ -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
@@ -238,6 +242,30 @@ On peut en profiter pour adapter le *style* des éléments englobants. ### 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`