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 charge 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...
226 style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
227 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
228 <div class="message" id="anim2_message">Ellipsographe</div>
229 <div id="anim2_boutons"><button onclick="charge_anim2();">Charger l'animation</button></div>
233 Dans le même temps, le *style* des éléments englobants a été adapté.
235 <div id="anim2" style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
236 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
237 <div class="message" id="anim2_message">Ellipsographe</div>
238 <div id="anim2_boutons"><button onclick="charge_anim2()">Charger l'animation</button></div>
245 L'objet `Animation` ne possède que deux propriétés configurables, autres
246 que celles (4) qui lui sont passées en argument.
248 • **delai** *(valeur par défaut : 50)* — C'est la durée, en millisecondes, entre deux images.
251 var a = new Animation('anim','svg/pre',1,100);
255 Ceci fixera le défilement à 5 images/s. Un *player* comme ceux que nous vous proposons ci-dessous peut
256 modifier cette valeur.
258 • **pad** *(valeur par défaut : 0)* — Ce paramètre n'a d'effet
259 que s'il est supérieur ou égal à 2, il permet de fixer la longueur des
260 index des images en complétant avec des 0.
263 var a = new Animation('anim','svg/pre',1,100);
267 Les images chargées seront, successivement, `svg/pre001.svg`, `svg/pre002.svg`, ..., `svg/pre100.svg`.
271 Le fichier `SVGAnimation.js` contient le constructeur `Controle` qui est
272 la base des *players*. S'il est invoqué directement, il fournit un
273 contrôle *simpliste* de l'animation, comme cela a été vu
274 [ci-dessus](#côté-javascript).
276 ### `SVGPlayerOne.js`
278 ### `SVGPlayerButtons.js`
280 ## Exemples d'utilisation