X-Git-Url: https://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=blobdiff_plain;f=doc%2Fpage.html;h=33c7f29370e0355a565e8622d85af54a76db607a;hp=4c4afe5f41d82baeedb5ee0e56f2f17b5bdc39ba;hb=4b4707e827c7674de20de51cbd275671696d032c;hpb=8ea9751e89ee425de9e4a7ff4c664245b068e612 diff --git a/doc/page.html b/doc/page.html index 4c4afe5..33c7f29 100644 --- a/doc/page.html +++ b/doc/page.html @@ -9,6 +9,12 @@ var player = new Controle(anim); player.connect(); } + function charge_anim2() { + var a = new Animation('anim2'); + a.loopOnLoad(); + var b = new Controle(a); + b.connect(); + } $(window).load(function() { anim = new Animation('XXXX','../ellipsographe/svg/ellipsographe-',1,91); anim.loopOnload(); @@ -33,7 +39,7 @@ Nous présentons, dans la section XX, le code qui permet de charger l'animat
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.
Les différentes images composant l'animation doivent se nommer avec un prefixe puis d'un nombre (indice), celui-ci pouvant être formater de différente façons :
+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 ...
@@ -45,7 +51,7 @@ L'idée d'une telle librairie est venue du fait que le logiciel MetaPost per
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"
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"/>
@@ -53,14 +59,14 @@ L'idée d'une telle librairie est venue du fait que le logiciel MetaPost per
<div id="anim1_boutons"></div>
</div>
Une fois qu'on a la structure HTML présentée ci-dessus, il est nécessaire d'ajouter un peu de code JavaScript permettre à l'animation de se jouer.
+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.
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é, 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 :
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);
@@ -92,7 +98,7 @@ L'idée d'une telle librairie est venue du fait que le logiciel MetaPost per
<div class="message" id="XXXX_message">Chargement...</div>
<div id="XXXX_boutons"></div>
</div>
dont le résultat est :
+dont l'affichage est :
Il est possible de différer le chargement de l'animation en créant une fonction Javascript.
+function charge_anim2() {
+ var a = new Animation('anim2');
+ 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...
<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>
On peut en profiter pour adapter le style des éléments englobants.