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);
13 **Participants :** Chupin Maxime, Sarlat Jean-Michel.
15 **Interface du dépôt Git :** <http://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=summary>
17 L'objectif est de développer, en particulier, du code Javascript afin de
18 présenter des animations de fichiers SVG produits, en particulier, par
19 MetaPost. Ce développement n'étant pas tout à fait prédéterminé, il sera
20 constitué à partir de l'exploration de différents scénarios de
21 présentation de ces animations et des modes de construction des fichiers
24 <div class="alert alert-warning">
25 <p>Les différents exemples se charge en cliquant sur le bouton
26 dédié. Ceci **n'est pas** le comportement par défaut. Il s'agit
27 d'éviter de charger toutes les animations présentes sur cette page,
28 cela serait bien trop lourd.</p>
29 <p>Nous présentons, dans la section XX, le code qui permet de charger
30 l'animation sur demande.</p>
35 Le fichier `SVGAnimation.js` (que l'on supposera dans un répertoire nommé `js`) est à charger dans la page `html` en mettant les lignes suivantes :
37 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
38 <script type="text/javascript" src="js/SVGAnimation.js"></script>
40 La librairie `SVGAnimation.js` dépend de `JQuery`, il faut donc charger cette bibliothèque JavaScript avant.
44 Le principe est simple : on dispose d'un ensemble d'images au format
45 SVG qui constituent, par une suite chronologique, une animation à
46 visionner. La libraire `SVGAnimation` permet de visionner cette
47 animation dans une page HTML.
49 ### La famille d'images
51 Les différentes images composant l'animation doivent se nommer avec un
52 *prefixe* suivit d'un tiret puis d'un nombre (celui-ci pouvant être
53 formater de différente façons).
55 monfichier-1.svg monfichier-2.svg monfichier-3.svg ...
59 monfichier-001.svg monfichier-002.svg monfichier-003.svg ...
61 Nous verrons comment gérer le formatage de l'indice des images dans
62 les sections suivantes.
64 <div class="alert alert-info">
65 <p>L'idée d'une telle librairie est venue du fait que le logiciel
66 MetaPost permet de produire des images SVG, et nous l'utilisons
67 abondamment pour la production d'animations.</p>
71 ## L'objet `Animation`
73 La librairie `SVGAnimation` définit le *prototype* javascript
74 `Animation`. Pour l'utiliser il faut déclarer
76 <div id="anim1" style="margin:10px auto;padding:10px;width:350px;border:2px solid #AAA;border-radius:4px">
77 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
78 <div class="message" id="anim1_message">Ellipsographe</div>
79 <div id="anim1_boutons"><button onclick="charge('anim1','../ellipsographe/svg/ellipsographe-',1,91);">Charger l'animation</button></div>
91 ### `SVGPlayerButtons.js`