+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="../SVGAnimation.js"></script>
<script type="text/javascript" src="../SVGPlayerOne.js"></script>
<script type="text/javascript">
SVG.
<div class="alert alert-warning">
-<p>Les différents exemples se charge en cliquant sur le bouton
+<p>Les différents exemples se chargent en cliquant sur le bouton
dédié. Ceci **n'est pas** le comportement par défaut, c'est du code
JavaScript qui permettra de choisir quand l'animation se charge. Il
s'agit
justement le chargement de l'animation...
~~~~~~~ { .html }
-<div id="anim2"
- style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
- <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
+<div id="anim2" style="...">
+ <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="..."/>
<div class="message" id="anim2_message">Ellipsographe</div>
- <div id="anim2_boutons"><button onclick="charge_anim2();">Charger l'animation</button></div>
+ <div id="anim2_boutons">
+ <button onclick="charge_anim2();">Charger l'animation</button>
+ </div>
</div>
~~~~~~~
a.delai = 200;
a.loopOnload();
~~~
-Ceci fixera le défilement à 5 images/s. Un *player* comme ceux que nous vous proposons ci-dessus peut
+Ceci fixera le défilement à 5 images/s. Un *player* comme ceux que nous vous proposons ci-dessous peut
modifier cette valeur.
• **pad** *(valeur par défaut : 0)* — Ce paramètre n'a d'effet
## Les *players*
+Le fichier `SVGAnimation.js` contient le constructeur `Controle` qui est
+la base des *players*. S'il est invoqué directement, il fournit un
+contrôle *simpliste* de l'animation, comme cela a été vu
+[ci-dessus](#côté-javascript).
+
### `SVGPlayerOne.js`
-### `SVGPlayerButtons.js`
+Pour utiliser un *player* plus *sophistiqué*, il faut surcharger la
+méthode `Initialisation` de l'objet `Controle`. Pour plus de détails
+sur les *players*, nous vous invitons à consulter la page dédiée.
+
+L'idée que nous présentons ici est de construire un objet JavaScript
+qui mettra des boutons de contrôle (lecture, stop, etc.).
+
+Ceci peut se faire de la façon suivante :
+
+~~~~~~~ { .javascript }
+function SVGPlayerOne(a) { // déclaration de l'objet
+ Controle.call(this,a); // construit à partir de l'objet Controle
+ SVGPlayerOne.prototype.connect = Controle.prototype.connect // et de
+ // la méthode connect du Controle
+}
+~~~~~~~
+
+Une fois déclaré un tel objet, il suffit de surcharger la méthode
+`Initialisation` de l'objet `Controle` fourni dans `SVGAnimation.js`.
+Dans l'exemple ci-dessous, on « vide » la `div` `XXXX_message`, et on
+ajoute des boutons à la `div` `XXXX_boutons` qui réagissent aux
+`onclick` pour lancer les fonctions JavaScript adéquates définies dans
+le fichier `SVGAnimation.js`.
+
+~~~~~~~ { .javascript }
+// Surcharge de la méthode [Initialisation]
+SVGPlayerOne.prototype.Initialisation = function() {
+ var a = this.a; // l'animation courante
+ var self = this.me; // le player
+ a.image.style.display = 'inline';
+ a.message.parentNode.removeChild(a.message); // on supprime la
+ //balise d'id=XXXX_message
+ var play = document.createElement('button'); // on crée un bouton
+ play.className = "SVGplay playBtn"; // ajout de classe pour le style
+ play.innerHTML = "Play"; // on y met du texte
+ play.onclick = function(){a.action = true; a.rotate(self.a)}; // on
+ // associe une fonction JS
+ // on recommence
+ var stop = document.createElement('button');
+ stop.className = "SVGplay stopBtn";
+ stop.innerHTML = "Stop";
+ stop.onclick = function(){a.action = false;};
+ var debut = document.createElement('button');
+ debut.className = "SVGplay debutBtn";
+ debut.innerHTML = "Début";
+ debut.onclick = function(){a.action = false; a.first(self.a)};
+ var fin = document.createElement('button');
+ fin.className = "SVGplay finBtn";
+ fin.innerHTML = "Fin";
+ fin.onclick = function(){a.action = false; a.last(self.a)};
+ var moins = document.createElement('button');
+ moins.className = "SVGplay moinsBtn";
+ moins.innerHTML = "-";
+ moins.onclick = function(){a.delai = a.delai > 2000 ? 2000 : a.delai * 1.414};
+ var plus = document.createElement('button');
+ plus.className = "SVGplay plusBtn";
+ plus.innerHTML = "+";
+ plus.onclick = function(){a.delai = a.delai < 30 ? 30 : a.delai / 1.414};
+ // placement des boutons
+ a.boutons.appendChild(play);
+ a.boutons.appendChild(stop);
+ a.boutons.appendChild(debut);
+ a.boutons.appendChild(fin);
+ a.boutons.appendChild(moins);
+ a.boutons.appendChild(plus);
+}
+~~~~~~~
+
+Un fois déclaré tout ceci (le mieux étant dans un fichier externe), on
+associe le *player* `SVGPlayerOne` à l'animation de la même façon que
+le *player* `Controle` :
+
+~~~~~~~ { .javascript }
+var anim = new Animation('anim2','svg/ellipsographe-',1,91);
+anim.loopOnload();
+var player = new SVGPlayerOne(anim);
+player.connect();
+~~~~~~~
+
+<script type="text/javascript">
+ function charge_anim3() {
+ var anim = new Animation('anim3','../ellipsographe/svg/ellipsographe-',1,91);
+ anim.loopOnload();
+ var player = new SVGPlayerOne(anim);
+ player.connect();
+ }
+</script>
+
+<div id="anim3" style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
+ <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
+ <div class="message" id="anim3_message">Ellipsographe</div>
+ <div id="anim3_boutons"><button onclick="charge_anim3()">Charger l'animation</button></div>
+</div>
+
+Le fichier `SVGPlayerOne.js` est fourni à la racine du projet SVGAnimation.
+
+
## Exemples d'utilisation
+
+<div class="row">
+<div class="col-md-4">
+<a href="//melusine.eu.org/syracuse/G/svganimation-exemples/mvtretrograde/"
+alt="lien vers l'exemple"><img src="img/mvtretrograde.png"
+alt="Image de l'exemple" style="width: 100%;"/></a>
+</div>
+<div class="col-md-8">
+Animation avec le *player* `SVGPlayerButtons` et une factorisation
+avec MetaPost du matériel qui se répète sur chaque image. Le fond
+est mis en *background* de la balise englobante, permettant ainsi
+d'alléger l'animation.
+</div>
+</div>
+
+<div class="row">
+<div class="col-md-4">
+<a href="//melusine.eu.org/syracuse/G/svganimation-exemples/delaunay/"
+alt="lien vers l'exemple"><img src="img/delaunay.png"
+alt="Image de l'exemple" style="width: 100%;"/></a>
+</div>
+<div class="col-md-8">
+Fabrication de l'animation à partir d'un fichier PDF transformé en
+fichiers SVG grâce au programme `pdf2svg`.
+
+Animation avec le *player* `SVGPlayerButtons`. L'animation est une
+animation de construction d'un maillage, le contrôle se fait donc
+image par image.
+
+Le player est donc paramétré pour n'afficher que les boutons de
+*début* et *fin* d'animation, ainsi que l'avance et le recule *image
+par image*.
+
+L'affichage des boutons est personnalisé grâce à du code CSS.
+</div>
+</div>
Projets / svganimation.git / blobdiff
Les fichiers de Syracuse sont mis à
disposition (sauf mention contraire) selon les termes de la