-Les différents exemples se charge 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 d'éviter de charger toutes les animations présentes sur cette page, cela serait bien trop lourd. +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 d'éviter de charger toutes les animations présentes sur cette page, cela serait bien trop lourd.
Nous présentons, dans la section Les players
Le fichier Pour utiliser un player plus sophistiqué, il faut surcharger la méthode 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 : Une fois déclaré un tel objet, il suffit de surcharger la méthode Un fois déclaré tout ceci (le mieux étant dans un fichier externe), on associe le player 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.jsInitialisation de l'objet Controle. Pour plus de détails sur les players, nous vous invitons à consulter la page dédiée.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
+}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);
+}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();
+
+SVGPlayerOne.js est fourni à la racine du projet SVGAnimation.Exemples d'utilisation