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
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 Il est possible de différer le chargement de l'animation en créant une fonction Javascript.
208 ~~~~~~~ { .javascript }
209 function charge_anim2() {
210 var a = new Animation('anim2','svg/ellipsographe-',1,91);
212 var b = new Controle(a);
217 Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant, à
218 l'internaute, le chargement de l'animation...
222 style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
223 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
224 <div class="message" id="anim2_message">Ellipsographe</div>
225 <div id="anim2_boutons"><button onclick="charge_anim2();">Charger l'animation</button></div>
229 On peut en profiter pour adapter le *style* des éléments englobants.
231 <div id="anim2" style="margin:10px auto;padding:10px;width:350px;border:2px solid #AAA;border-radius:4px">
232 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
233 <div class="message" id="anim2_message">Ellipsographe</div>
234 <div id="anim2_boutons"><button onclick="charge_anim2()">Charger l'animation</button></div>
243 ### `SVGPlayerOne.js`
245 ### `SVGPlayerButtons.js`
247 ## Exemples d'utilisation