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 $(window).load(function() {
12 anim = new Animation('XXXX','../ellipsographe/svg/ellipsographe-',1,91);
14 player = new Controle(anim);
20 **Participants :** Chupin Maxime, Sarlat Jean-Michel.
22 **Interface du dépôt Git :** <http://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=summary>
24 L'objectif est de développer, en particulier, du code Javascript afin de
25 présenter des animations de fichiers SVG produits, en particulier, par
26 MetaPost. Ce développement n'étant pas tout à fait prédéterminé, il sera
27 constitué à partir de l'exploration de différents scénarios de
28 présentation de ces animations et des modes de construction des fichiers
31 <div class="alert alert-warning">
32 <p>Les différents exemples se charge en cliquant sur le bouton
33 dédié. Ceci **n'est pas** le comportement par défaut, c'est du code
34 JavaScript qui permettra de choisir quand l'animation se charge. Il
36 d'éviter de charger toutes les animations présentes sur cette page,
37 cela serait bien trop lourd.</p>
38 <p>Nous présentons, dans la section XX, le code qui permet de charger
39 l'animation sur demande.</p>
44 Le fichier `SVGAnimation.js` (que l'on supposera dans un répertoire
45 nommé `js`) est à charger dans la page `html` en mettant les lignes
48 <script type="text/javascript" src="js/SVGAnimation.js"></script>
53 Le principe est simple : on dispose d'un ensemble d'images au format
54 SVG qui constituent, par une suite chronologique, une animation à
55 visionner. La libraire `SVGAnimation` permet de visionner cette
56 animation dans une page HTML grâce à JavaScript.
58 ### La famille d'images
60 Les différentes images composant l'animation doivent se nommer avec un
61 *prefixe* puis d'un nombre (indice), celui-ci pouvant être
62 formater de différente façons :
64 monfichier-1.svg monfichier-2.svg monfichier-3.svg ...
68 monfichier-001.svg monfichier-002.svg monfichier-003.svg ...
70 Nous verrons comment gérer le formatage de l'indice des images dans
71 les sections suivantes.
73 <div class="alert alert-info">
74 <p>L'idée d'une telle librairie est venue du fait que le logiciel
75 MetaPost permet de produire des images SVG, et nous l'utilisons
76 abondamment pour la production d'animations.</p>
84 La librairie `SVGAnimation` définit le *prototype* javascript
85 `Animation`. Pour l'utiliser il faut déclarer une balise HTML `div`
86 avec un identifiant (`id`) unique. Choisissons pour l'exemple `XXXX`.
87 À l'intérieur de ces balises, il
89 * une balise `img` contenant un image `svg` qui servira de vignette à
91 * une balise `div` avec l'identifiant `id="XXXX_message"` où `XXXX` est
92 l'identifiant de la balise englobante. Dans cette balise *message*,
93 on y met, si on le souhaite, un message à afficher avant le
94 chargement de l'animation.
95 * une balise `div` avec l'identifiant `id="XXXX_boutons"`
98 En supposant que les images SVG se trouvent dans un répertoire nommé
99 `svg`, voici un exemple d'une telle structure :
103 <img src="svg/ellipsographe-1.svg" alt="animation1"/>
104 <div class="message" id="anim1_message">Chargement</div>
105 <div id="anim1_boutons"></div>
111 Une fois qu'on a la structure HTML présentée ci-dessus, il est
112 nécessaire d'ajouter un peu de code JavaScript permettre à l'animation
115 #### Construire l'objet `Animation`
117 Le *constructeur* du prototype JavaScript s'utilise, pour l'exemple
118 donné à la section précédente, de la façon
121 ~~~~~~~ { .javascript }
122 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
126 `XXXX` est l'identifiant de la balise `div` HTML *englobante*,
127 `svg/ellipsographe-` est le préfixe dont on a parlé plus haut, `1` est
128 l'indice de la première image à animer, et `91` l'indice de la
131 `anim.loopOnload()` permet le chargement de l'animation.
133 Une fois celle-ci chargé, il faut en permettre la lecture qui se fait
134 grâce à un nouvel objet nommé `Controle`. Ce contrôle s'utilise en
137 ~~~~~~~ { .javascript }
138 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
140 var player = new Controle(anim);
144 Nous verrons par la suite comment personnaliser le contrôle de la
145 lecture de l'animation.
147 Tout ceci n'est toujours pas suffisant car il faut exécuter ce code
148 JavaScript. Ceci peut être fait grâce à `JQuery` par exemple, en
149 exécutant ces quatre lignes de code à l'ouverture de la fenêtre :
151 ~~~~~~~ { .javascript }
152 $(window).load(function() {
153 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
155 var player = new Controle(anim);
160 Bien sûr, ceci nécessite le chargement, dans la page HTML, de la
169 Tout ceci donne le code suivant
172 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
173 <script type="text/javascript" src="../SVGAnimation.js"></script>
174 <script type="text/javascript" src="../SVGPlayerOne.js"></script>
175 <script type="text/javascript">
176 $(window).load(function() {
177 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
179 var player = new Controle(anim);
185 <img src="svg/ellipsographe-1.svg" alt="animation1"/>
186 <div class="message" id="XXXX_message">Chargement...</div>
187 <div id="XXXX_boutons"></div>
191 dont le résultat est :
194 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>
195 <div class="message" id="XXXX_message">Chargement...</div>
196 <div id="XXXX_boutons"></div>
201 <div id="anim2" style="margin:10px auto;padding:10px;width:350px;border:2px solid #AAA;border-radius:4px">
202 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
203 <div class="message" id="anim2_message">Ellipsographe</div>
204 <div id="anim2_boutons"><button onclick="charge('anim2','../ellipsographe/svg/ellipsographe-',1,91);">Charger l'animation</button></div>
212 ### `SVGPlayerOne.js`
214 ### `SVGPlayerButtons.js`
216 ## Exemples d'utilisation