1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
2 <script type="text/javascript" src="../SVGAnimation.js"></script>
3 <script type="text/javascript" src="../SVGPlayerOne.js"></script>
4 <script type="text/javascript">
5 function charge(i,p,a,b) {
6 var anim = new Animation(i,p,a,b);
8 var player = new Controle(anim);
11 function charge_anim2() {
12 var a = new Animation('anim2','../ellipsographe/svg/ellipsographe-',1,91);
14 var b = new Controle(a);
17 $(window).load(function() {
18 anim = new Animation('XXXX','../ellipsographe/svg/ellipsographe-',1,91);
20 player = new Controle(anim);
26 **Participants :** Chupin Maxime, Sarlat Jean-Michel.
28 **Interface du dépôt Git :** <http://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=summary>
30 L'objectif est de développer, en particulier, du code Javascript afin de
31 présenter des animations de fichiers SVG produits, en particulier, par
32 MetaPost. Ce développement n'étant pas tout à fait prédéterminé, il sera
33 constitué à partir de l'exploration de différents scénarios de
34 présentation de ces animations et des modes de construction des fichiers
37 <div class="alert alert-warning">
38 <p>Les différents exemples se chargent en cliquant sur le bouton
39 dédié. Ceci **n'est pas** le comportement par défaut, c'est du code
40 JavaScript qui permettra de choisir quand l'animation se charge. Il
42 d'éviter de charger toutes les animations présentes sur cette page,
43 cela serait bien trop lourd.</p>
44 <p>Nous présentons, dans la section <a
45 href="#chargement-différé">Chargement différé</a>, le code qui permet de
46 charger l'animation sur demande.</p>
51 Le fichier `SVGAnimation.js` (que l'on supposera dans un répertoire
52 nommé `js`) est à charger dans la page `html` en mettant les lignes
55 <script type="text/javascript" src="js/SVGAnimation.js"></script>
60 Le principe est simple : on dispose d'un ensemble d'images au format
61 SVG qui constituent, par une suite chronologique, une animation à
62 visionner. La libraire `SVGAnimation` permet de visionner cette
63 animation dans une page HTML grâce à JavaScript.
65 ### La famille d'images
67 Les différentes images composant l'animation doivent se nommer avec un
68 *prefixe* suivi d'un nombre (indice), celui-ci pouvant être
69 formater de différente façons :
71 monfichier-1.svg monfichier-2.svg monfichier-3.svg ...
75 monfichier-001.svg monfichier-002.svg monfichier-003.svg ...
77 Nous verrons comment gérer le formatage de l'indice des images dans
78 les sections suivantes.
80 <div class="alert alert-info">
81 <p>L'idée d'une telle librairie est venue du fait que le logiciel
82 MetaPost permet de produire des images SVG, et nous l'utilisons
83 abondamment pour la production d'animations.</p>
91 La librairie `SVGAnimation` définit le *prototype* javascript
92 `Animation`. Pour l'utiliser il faut déclarer une balise HTML `div`
93 avec un identifiant (`id`) unique. Choisissons pour l'exemple `XXXX`.
94 À l'intérieur de ces balises, il
97 * une balise `img` contenant un image `svg` qui servira de vignette à
99 * une balise `div` avec l'identifiant `id="XXXX_message"` où `XXXX` est
100 l'identifiant de la balise englobante. Dans cette balise *message*,
101 on y met, si on le souhaite, un message à afficher avant le
102 chargement de l'animation;
103 * une balise `div` avec l'identifiant `id="XXXX_boutons"`.
106 En supposant que les images SVG se trouvent dans un répertoire nommé
107 `svg`, voici un exemple d'une telle structure :
111 <img src="svg/ellipsographe-1.svg" alt="animation1"/>
112 <div class="message" id="anim1_message">Chargement</div>
113 <div id="anim1_boutons"></div>
119 Une fois qu'on a la structure HTML présentée ci-dessus, il est
120 nécessaire d'ajouter un peu de code JavaScript pour permettre à l'animation
123 #### Construire l'objet `Animation`
125 Le *constructeur* du prototype JavaScript s'utilise, pour l'exemple
126 donné à la section précédente, de la façon
129 ~~~~~~~ { .javascript }
130 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
134 `XXXX` est l'identifiant de la balise `div` HTML *englobante*,
135 `svg/ellipsographe-` est le préfixe dont on a parlé plus haut, `1` est
136 l'indice de la première image à animer, et `91` l'indice de la
139 `anim.loopOnload()` permet le chargement de l'animation.
141 Une fois celle-ci chargée, il faut en permettre la lecture qui se fait
142 grâce à un nouvel objet nommé `Controle`. Ce contrôle s'utilise en
145 ~~~~~~~ { .javascript }
146 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
148 var player = new Controle(anim);
152 Nous verrons par la suite comment personnaliser le contrôle de la
153 lecture de l'animation.
155 Tout ceci n'est toujours pas suffisant car il faut exécuter ce code
156 JavaScript. Ceci peut être fait grâce à `JQuery` par exemple, en
157 exécutant ces quatre lignes de code à l'ouverture de la fenêtre :
159 ~~~~~~~ { .javascript }
160 $(window).load(function() {
161 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
163 var player = new Controle(anim);
168 Bien sûr, ceci nécessite le chargement, dans la page HTML, de la
177 Tout ceci donne le code suivant
180 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
181 <script type="text/javascript" src="../SVGAnimation.js"></script>
182 <script type="text/javascript">
183 $(window).load(function() {
184 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
186 var player = new Controle(anim);
192 <img src="svg/ellipsographe-1.svg" alt="animation1"/>
193 <div class="message" id="XXXX_message">Chargement...</div>
194 <div id="XXXX_boutons"></div>
198 dont l'affichage est :
201 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>
202 <div class="message" id="XXXX_message">Chargement...</div>
203 <div id="XXXX_boutons"></div>
207 #### Chargement différé
209 On peut laisser le chargement d'une animation à la demande en créant une
212 ~~~~~~~ { .javascript }
213 function charge_anim2() {
214 var a = new Animation('anim2','svg/ellipsographe-',1,91);
216 var b = new Controle(a);
221 Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant
222 justement le chargement de l'animation...
225 <div id="anim2" style="...">
226 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="..."/>
227 <div class="message" id="anim2_message">Ellipsographe</div>
228 <div id="anim2_boutons">
229 <button onclick="charge_anim2();">Charger l'animation</button>
234 Dans le même temps, le *style* des éléments englobants a été adapté.
236 <div id="anim2" style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
237 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
238 <div class="message" id="anim2_message">Ellipsographe</div>
239 <div id="anim2_boutons"><button onclick="charge_anim2()">Charger l'animation</button></div>
246 L'objet `Animation` ne possède que deux propriétés configurables, autres
247 que celles (4) qui lui sont passées en argument.
249 • **delai** *(valeur par défaut : 50)* — C'est la durée, en millisecondes, entre deux images.
252 var a = new Animation('anim','svg/pre',1,100);
256 Ceci fixera le défilement à 5 images/s. Un *player* comme ceux que nous vous proposons ci-dessous peut
257 modifier cette valeur.
259 • **pad** *(valeur par défaut : 0)* — Ce paramètre n'a d'effet
260 que s'il est supérieur ou égal à 2, il permet de fixer la longueur des
261 index des images en complétant avec des 0.
264 var a = new Animation('anim','svg/pre',1,100);
268 Les images chargées seront, successivement, `svg/pre001.svg`, `svg/pre002.svg`, ..., `svg/pre100.svg`.
272 Le fichier `SVGAnimation.js` contient le constructeur `Controle` qui est
273 la base des *players*. S'il est invoqué directement, il fournit un
274 contrôle *simpliste* de l'animation, comme cela a été vu
275 [ci-dessus](#côté-javascript).
277 ### `SVGPlayerOne.js`
279 Pour utiliser un *player* plus *sophistiqué*, il faut surcharger la
280 méthode `Initialisation` de l'objet `Controle`. Pour plus de détails
281 sur les *players*, nous vous invitons à consulter la page dédiée.
283 L'idée que nous présentons ici est de construire un objet JavaScript
284 qui mettra des boutons de contrôle (lecture, stop, etc.).
286 Ceci peut se faire de la façon suivante :
288 ~~~~~~~ { .javascript }
289 function SVGPlayerOne(a) { // déclaration de l'objet
290 Controle.call(this,a); // construit à partir de l'objet Controle
291 SVGPlayerOne.prototype.connect = Controle.prototype.connect // et de
292 // la méthode connect du Controle
296 Une fois déclaré un tel objet, il suffit de surcharger la méthode
297 `Initialisation` de l'objet `Controle` fourni dans `SVGAnimation.js`.
298 Dans l'exemple ci-dessous, on « vide » la `div` `XXXX_message`, et on
299 ajoute des boutons à la `div` `XXXX_boutons` qui réagissent aux
300 `onclick` pour lancer les fonctions JavaScript adéquates définies dans
301 le fichier `SVGAnimation.js`.
303 ~~~~~~~ { .javascript }
304 // Surcharge de la méthode [Initialisation]
305 SVGPlayerOne.prototype.Initialisation = function() {
306 var a = this.a; // l'animation courante
307 var self = this.me; // le player
308 a.image.style.display = 'inline';
309 a.message.parentNode.removeChild(a.message); // on supprime la
310 //balise d'id=XXXX_message
311 var play = document.createElement('button'); // on crée un bouton
312 play.className = "SVGplay playBtn"; // ajout de classe pour le style
313 play.innerHTML = "Play"; // on y met du texte
314 play.onclick = function(){a.action = true; a.rotate(self.a)}; // on
315 // associe une fonction JS
317 var stop = document.createElement('button');
318 stop.className = "SVGplay stopBtn";
319 stop.innerHTML = "Stop";
320 stop.onclick = function(){a.action = false;};
321 var debut = document.createElement('button');
322 debut.className = "SVGplay debutBtn";
323 debut.innerHTML = "Début";
324 debut.onclick = function(){a.action = false; a.first(self.a)};
325 var fin = document.createElement('button');
326 fin.className = "SVGplay finBtn";
327 fin.innerHTML = "Fin";
328 fin.onclick = function(){a.action = false; a.last(self.a)};
329 var moins = document.createElement('button');
330 moins.className = "SVGplay moinsBtn";
331 moins.innerHTML = "-";
332 moins.onclick = function(){a.delai = a.delai > 2000 ? 2000 : a.delai * 1.414};
333 var plus = document.createElement('button');
334 plus.className = "SVGplay plusBtn";
335 plus.innerHTML = "+";
336 plus.onclick = function(){a.delai = a.delai < 30 ? 30 : a.delai / 1.414};
337 // placement des boutons
338 a.boutons.appendChild(play);
339 a.boutons.appendChild(stop);
340 a.boutons.appendChild(debut);
341 a.boutons.appendChild(fin);
342 a.boutons.appendChild(moins);
343 a.boutons.appendChild(plus);
347 Un fois déclaré tout ceci (le mieux étant dans un fichier externe), on
348 associe le *player* `SVGPlayerOne` à l'animation de la même façon que
349 le *player* `Controle` :
351 ~~~~~~~ { .javascript }
352 var anim = new Animation('anim2','svg/ellipsographe-',1,91);
354 var player = new SVGPlayerOne(anim);
358 <script type="text/javascript">
359 function charge_anim3() {
360 var anim = new Animation('anim3','../ellipsographe/svg/ellipsographe-',1,91);
362 var player = new SVGPlayerOne(anim);
367 <div id="anim3" style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
368 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
369 <div class="message" id="anim3_message">Ellipsographe</div>
370 <div id="anim3_boutons"><button onclick="charge_anim3()">Charger l'animation</button></div>
373 Le fichier `SVGPlayerOne.js` est fourni à la racine du projet SVGAnimation.
377 ## Exemples d'utilisation