From 4b4707e827c7674de20de51cbd275671696d032c Mon Sep 17 00:00:00 2001 From: Jean-Michel Sarlat Date: Sun, 13 Nov 2016 18:56:56 +0100 Subject: [PATCH] =?utf8?q?Les=20animations=20diff=C3=A9r=C3=A9es...?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit --- doc/page.html | 33 +++++++++++++++++++++++++++------ doc/page.md | 45 ++++++++++++++++++++++++++++++++++++++------- 2 files changed, 65 insertions(+), 13 deletions(-) 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

Principe

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.

La famille d'images

-

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

L'utilisation

Côté HTML

-

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>

Côté JavaScript

-

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.

Construire l'objet 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 :

animation1
@@ -102,13 +108,28 @@ Chargement...
+

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.

animation1
Ellipsographe
-
diff --git a/doc/page.md b/doc/page.md index 663a7f9..7b9b1c4 100644 --- a/doc/page.md +++ b/doc/page.md @@ -8,6 +8,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(); @@ -58,7 +64,7 @@ animation dans une page HTML grâce à JavaScript. ### La famille d'images Les différentes images composant l'animation doivent se nommer avec un -*prefixe* puis d'un nombre (indice), celui-ci pouvant être +*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 ... @@ -91,8 +97,8 @@ faut : * 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"` + 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é @@ -109,7 +115,7 @@ En supposant que les images SVG se trouvent dans un répertoire nommé ### Côté JavaScript 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 +nécessaire d'ajouter un peu de code JavaScript pour permettre à l'animation de se jouer. #### Construire l'objet `Animation` @@ -130,7 +136,7 @@ dernière. `anim.loopOnload()` permet le chargement de l'animation. -Une fois celle-ci chargé, il faut en permettre la lecture qui se fait +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 : @@ -187,7 +193,7 @@ $(window).load(function() {
~~~~~~~ -dont le résultat est : +dont l'affichage est :
animation1 @@ -196,14 +202,39 @@ dont le résultat est :
+Il est possible de différer le chargement de l'animation en créant une fonction Javascript. + +~~~~~~~ { .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... + +~~~~~~~ { .html } +
+ animation1 +
Ellipsographe
+
+
+~~~~~~~ + +On peut en profiter pour adapter le *style* des éléments englobants.
animation1
Ellipsographe
-
+
+ ### Les paramètres ## Les *players* -- 2.20.1