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