1 <script type="text/javascript" src="../SVGAnimation.js"></script>
2 <script type="text/javascript" src="../SVGPlayerOne.js"></script>
3 <script type="text/javascript">
4 function charge(i,p,a,b) {
5 var anim = new Animation(i,p,a,b);
7 var player = new Controle(anim);
10 function charge_anim2() {
11 var a = new Animation('anim2','../ellipsographe/svg/ellipsographe-',1,91);
13 var b = new Controle(a);
16 $(window).load(function() {
17 anim = new Animation('XXXX','../ellipsographe/svg/ellipsographe-',1,91);
19 player = new Controle(anim);
25 **Participants :** Chupin Maxime, Sarlat Jean-Michel.
27 **Interface du dépôt Git :** <http://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=summary>
29 L'objectif est de développer, en particulier, du code Javascript afin de
30 présenter des animations de fichiers SVG produits, en particulier, par
31 MetaPost. Ce développement n'étant pas tout à fait prédéterminé, il sera
32 constitué à partir de l'exploration de différents scénarios de
33 présentation de ces animations et des modes de construction des fichiers
36 <div class="alert alert-warning">
37 <p>Les différents exemples se charge en cliquant sur le bouton
38 dédié. Ceci **n'est pas** le comportement par défaut, c'est du code
39 JavaScript qui permettra de choisir quand l'animation se charge. Il
41 d'éviter de charger toutes les animations présentes sur cette page,
42 cela serait bien trop lourd.</p>
43 <p>Nous présentons, dans la section <a
44 href="#chargement-différé">Chargement différé</a>, le code qui permet de
45 charger l'animation sur demande.</p>
50 Le fichier `SVGAnimation.js` (que l'on supposera dans un répertoire
51 nommé `js`) est à charger dans la page `html` en mettant les lignes
54 <script type="text/javascript" src="js/SVGAnimation.js"></script>
59 Le principe est simple : on dispose d'un ensemble d'images au format
60 SVG qui constituent, par une suite chronologique, une animation à
61 visionner. La libraire `SVGAnimation` permet de visionner cette
62 animation dans une page HTML grâce à JavaScript.
64 ### La famille d'images
66 Les différentes images composant l'animation doivent se nommer avec un
67 *prefixe* suivi d'un nombre (indice), celui-ci pouvant être
68 formater de différente façons :
70 monfichier-1.svg monfichier-2.svg monfichier-3.svg ...
74 monfichier-001.svg monfichier-002.svg monfichier-003.svg ...
76 Nous verrons comment gérer le formatage de l'indice des images dans
77 les sections suivantes.
79 <div class="alert alert-info">
80 <p>L'idée d'une telle librairie est venue du fait que le logiciel
81 MetaPost permet de produire des images SVG, et nous l'utilisons
82 abondamment pour la production d'animations.</p>
90 La librairie `SVGAnimation` définit le *prototype* javascript
91 `Animation`. Pour l'utiliser il faut déclarer une balise HTML `div`
92 avec un identifiant (`id`) unique. Choisissons pour l'exemple `XXXX`.
93 À l'intérieur de ces balises, il
96 * une balise `img` contenant un image `svg` qui servira de vignette à
98 * une balise `div` avec l'identifiant `id="XXXX_message"` où `XXXX` est
99 l'identifiant de la balise englobante. Dans cette balise *message*,
100 on y met, si on le souhaite, un message à afficher avant le
101 chargement de l'animation;
102 * une balise `div` avec l'identifiant `id="XXXX_boutons"`.
105 En supposant que les images SVG se trouvent dans un répertoire nommé
106 `svg`, voici un exemple d'une telle structure :
110 <img src="svg/ellipsographe-1.svg" alt="animation1"/>
111 <div class="message" id="anim1_message">Chargement</div>
112 <div id="anim1_boutons"></div>
118 Une fois qu'on a la structure HTML présentée ci-dessus, il est
119 nécessaire d'ajouter un peu de code JavaScript pour permettre à l'animation
122 #### Construire l'objet `Animation`
124 Le *constructeur* du prototype JavaScript s'utilise, pour l'exemple
125 donné à la section précédente, de la façon
128 ~~~~~~~ { .javascript }
129 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
133 `XXXX` est l'identifiant de la balise `div` HTML *englobante*,
134 `svg/ellipsographe-` est le préfixe dont on a parlé plus haut, `1` est
135 l'indice de la première image à animer, et `91` l'indice de la
138 `anim.loopOnload()` permet le chargement de l'animation.
140 Une fois celle-ci chargée, il faut en permettre la lecture qui se fait
141 grâce à un nouvel objet nommé `Controle`. Ce contrôle s'utilise en
144 ~~~~~~~ { .javascript }
145 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
147 var player = new Controle(anim);
151 Nous verrons par la suite comment personnaliser le contrôle de la
152 lecture de l'animation.
154 Tout ceci n'est toujours pas suffisant car il faut exécuter ce code
155 JavaScript. Ceci peut être fait grâce à `JQuery` par exemple, en
156 exécutant ces quatre lignes de code à l'ouverture de la fenêtre :
158 ~~~~~~~ { .javascript }
159 $(window).load(function() {
160 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
162 var player = new Controle(anim);
167 Bien sûr, ceci nécessite le chargement, dans la page HTML, de la
176 Tout ceci donne le code suivant
179 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
180 <script type="text/javascript" src="../SVGAnimation.js"></script>
181 <script type="text/javascript">
182 $(window).load(function() {
183 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
185 var player = new Controle(anim);
191 <img src="svg/ellipsographe-1.svg" alt="animation1"/>
192 <div class="message" id="XXXX_message">Chargement...</div>
193 <div id="XXXX_boutons"></div>
197 dont l'affichage est :
200 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>
201 <div class="message" id="XXXX_message">Chargement...</div>
202 <div id="XXXX_boutons"></div>
206 #### Chargement différé
208 On peut laisser le chargement d'une animation à la demande en créant une
211 ~~~~~~~ { .javascript }
212 function charge_anim2() {
213 var a = new Animation('anim2','svg/ellipsographe-',1,91);
215 var b = new Controle(a);
220 Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant
221 justement le chargement de l'animation...
225 style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
226 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
227 <div class="message" id="anim2_message">Ellipsographe</div>
228 <div id="anim2_boutons"><button onclick="charge_anim2();">Charger l'animation</button></div>
232 Dans le même temps, le *style* des éléments englobants a été adapté.
234 <div id="anim2" style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
235 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
236 <div class="message" id="anim2_message">Ellipsographe</div>
237 <div id="anim2_boutons"><button onclick="charge_anim2()">Charger l'animation</button></div>
244 L'objet `Animation` ne possède que deux propriétés configurables, autres
245 que celles (4) qui lui sont passées en argument.
247 • **delai** *(valeur par défaut : 50)* — C'est la durée, en millisecondes, entre deux images.
250 var a = new Animation('anim','svg/pre',1,100);
254 Ceci fixera le défilement à 5 images/s. Un *player* comme ceux que nous vous proposons ci-dessus peut
255 modifier cette valeur.
257 • **pad** *(valeur par défaut : 0)* — Ce paramètre n'a d'effet
258 que s'il est supérieur ou égal à 2, il permet de fixer la longueur des
259 index des images en complétant avec des 0.
262 var a = new Animation('anim','svg/pre',1,100);
266 Les images chargées seront, successivement, `svg/pre001.svg`, `svg/pre002.svg`, ..., `svg/pre100.svg`.
270 ### `SVGPlayerOne.js`
272 ### `SVGPlayerButtons.js`
274 ## Exemples d'utilisation