X-Git-Url: https://melusine.eu.org/syracuse/G/git/?a=blobdiff_plain;ds=inline;f=doc%2Fpage.html;h=53bb237f547a16ab9e2de7814152affdda921fe8;hb=db08eee2240e6df1fa3dc319bb7c79db1ee506e8;hp=c1502815118acee94c279ad12113433f94feb056;hpb=b18b5c7d0c76e52002f8372aac5f597d762c096c;p=svganimation.git diff --git a/doc/page.html b/doc/page.html index c150281..53bb237 100644 --- a/doc/page.html +++ b/doc/page.html @@ -1,5 +1,5 @@
Participants : Chupin Maxime, Sarlat Jean-Michel.
@@ -33,7 +39,7 @@ Nous présentons, dans la section XX, le code qui permet de charger l'animatLe 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);
@@ -78,7 +84,6 @@ L'idée d'une telle librairie est venue du fait que le logiciel MetaPost per
Tout ceci donne le code suivant
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="../SVGAnimation.js"></script>
-<script type="text/javascript" src="../SVGPlayerOne.js"></script>
<script type="text/javascript">
$(window).load(function() {
var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
@@ -88,28 +93,43 @@ L'idée d'une telle librairie est venue du fait que le logiciel MetaPost per
});
</script>
<!--[...]-->
-<div id="anim1">
+<div id="XXXX">
<img src="svg/ellipsographe-1.svg" alt="animation1"/>
- <div class="message" id="anim1_message">Chargement</div>
- <div id="anim1_boutons"></div>
+ <div class="message" id="XXXX_message">Chargement...</div>
+ <div id="XXXX_boutons"></div>
</div>
-dont le résultat est :
-
+dont l'affichage est :
+
-