X-Git-Url: https://melusine.eu.org/syracuse/G/git/?a=blobdiff_plain;f=doc%2Fpage.html;h=ddd3932faffaa42926ae351362d21324cb9e36d4;hb=bb8183de3ce11f4e748684fc8346dd39c5793628;hp=ae62e50bcceb2d2ec72f236324b2692e79c4dd40;hpb=8ed5db453172aeedf05be3c9d5f565c2527d3be4;p=svganimation.git diff --git a/doc/page.html b/doc/page.html index ae62e50..ddd3932 100644 --- a/doc/page.html +++ b/doc/page.html @@ -27,7 +27,7 @@
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.
-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.js
Initialisation
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