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 XX, le code qui permet de charger
45 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
95 * une balise `img` contenant un image `svg` qui servira de vignette à
97 * une balise `div` avec l'identifiant `id="XXXX_message"` où `XXXX` est
98 l'identifiant de la balise englobante. Dans cette balise *message*,
99 on y met, si on le souhaite, un message à afficher avant le
100 chargement de l'animation;
101 * une balise `div` avec l'identifiant `id="XXXX_boutons"`.
104 En supposant que les images SVG se trouvent dans un répertoire nommé
105 `svg`, voici un exemple d'une telle structure :
109 <img src="svg/ellipsographe-1.svg" alt="animation1"/>
110 <div class="message" id="anim1_message">Chargement</div>
111 <div id="anim1_boutons"></div>
117 Une fois qu'on a la structure HTML présentée ci-dessus, il est
118 nécessaire d'ajouter un peu de code JavaScript pour permettre à l'animation
121 #### Construire l'objet `Animation`
123 Le *constructeur* du prototype JavaScript s'utilise, pour l'exemple
124 donné à la section précédente, de la façon
127 ~~~~~~~ { .javascript }
128 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
132 `XXXX` est l'identifiant de la balise `div` HTML *englobante*,
133 `svg/ellipsographe-` est le préfixe dont on a parlé plus haut, `1` est
134 l'indice de la première image à animer, et `91` l'indice de la
137 `anim.loopOnload()` permet le chargement de l'animation.
139 Une fois celle-ci chargée, il faut en permettre la lecture qui se fait
140 grâce à un nouvel objet nommé `Controle`. Ce contrôle s'utilise en
143 ~~~~~~~ { .javascript }
144 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
146 var player = new Controle(anim);
150 Nous verrons par la suite comment personnaliser le contrôle de la
151 lecture de l'animation.
153 Tout ceci n'est toujours pas suffisant car il faut exécuter ce code
154 JavaScript. Ceci peut être fait grâce à `JQuery` par exemple, en
155 exécutant ces quatre lignes de code à l'ouverture de la fenêtre :
157 ~~~~~~~ { .javascript }
158 $(window).load(function() {
159 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
161 var player = new Controle(anim);
166 Bien sûr, ceci nécessite le chargement, dans la page HTML, de la
175 Tout ceci donne le code suivant
178 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
179 <script type="text/javascript" src="../SVGAnimation.js"></script>
180 <script type="text/javascript">
181 $(window).load(function() {
182 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
184 var player = new Controle(anim);
190 <img src="svg/ellipsographe-1.svg" alt="animation1"/>
191 <div class="message" id="XXXX_message">Chargement...</div>
192 <div id="XXXX_boutons"></div>
196 dont l'affichage est :
199 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>
200 <div class="message" id="XXXX_message">Chargement...</div>
201 <div id="XXXX_boutons"></div>
205 Il est possible de différer le chargement de l'animation en créant une fonction Javascript.
207 ~~~~~~~ { .javascript }
208 function charge_anim2() {
209 var a = new Animation('anim2','svg/ellipsographe-',1,91);
211 var b = new Controle(a);
216 Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant, à
217 l'internaute, le chargement de l'animation...
221 style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
222 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
223 <div class="message" id="anim2_message">Ellipsographe</div>
224 <div id="anim2_boutons"><button onclick="charge_anim2();">Charger l'animation</button></div>
228 On peut en profiter pour adapter le *style* des éléments englobants.
230 <div id="anim2" style="margin:10px auto;padding:10px;width:350px;border:2px solid #AAA;border-radius:4px">
231 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
232 <div class="message" id="anim2_message">Ellipsographe</div>
233 <div id="anim2_boutons"><button onclick="charge_anim2">Charger l'animation</button></div>
242 ### `SVGPlayerOne.js`
244 ### `SVGPlayerButtons.js`
246 ## Exemples d'utilisation