<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>
Dans le même temps, le style des éléments englobants a été adapté.
@@ -147,36 +148,132 @@ Charger l'animation
var a = new Animation('anim','svg/pre',1,100);
a.delai = 200;
a.loopOnload();
-Ceci fixera le défilement à 5 images/s. Un player comme ceux que nous vous proposons ci-dessus peut modifier cette valeur.
+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 que s'il est supérieur ou égal à 2, il permet de fixer la longueur des index des images en complétant avec des 0.
var a = new Animation('anim','svg/pre',1,100);
a.pad = 3;
a.loopOnload();
Les images chargées seront, successivement, svg/pre001.svg, svg/pre002.svg, ..., svg/pre100.svg.
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.
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 :
+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.
+// 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 :
+var anim = new Animation('anim2','svg/ellipsographe-',1,91);
+anim.loopOnload();
+var player = new SVGPlayerOne(anim);
+player.connect();
+
+
+
+
+
+
+
+
+Le fichier SVGPlayerOne.js est fourni à la racine du projet SVGAnimation.
Exemples d'utilisation
+
+
+
+
+
+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.
+
+
+
+
+
+
+
+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.
+
+
+
+
+ SVGAnimation (documentation)
+
+ - Installation
+ - Principe
+ - L'utilisation
+ - Les players
+ SVGPlayerOne.js
+ - Exemples d'utilisation
+
+
-
-
-
-
-
\ No newline at end of file
+