X-Git-Url: https://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=blobdiff_plain;f=doc%2Fpage.md;h=5fbb551f655cca5958df138079af024174c239ea;hp=33e08d51b6d79ffb0d148299fc756e171cabf0c5;hb=757126aab08d97f84517b67486eb457b2ddc9126;hpb=f1b6847f4fde160a3b56c252201670205885f932 diff --git a/doc/page.md b/doc/page.md index 33e08d5..5fbb551 100644 --- a/doc/page.md +++ b/doc/page.md @@ -35,7 +35,7 @@ présentation de ces animations et des modes de construction des fichiers SVG.
-

Les différents exemples se charge en cliquant sur le bouton +

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 @@ -222,11 +222,12 @@ Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant justement le chargement de l'animation... ~~~~~~~ { .html } -

- animation1 +
+ animation1
Ellipsographe
-
+
+ +
~~~~~~~ @@ -252,7 +253,7 @@ 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 +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 @@ -268,8 +269,145 @@ Les images chargées seront, successivement, `svg/pre001.svg`, `svg/pre002.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](#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(); +~~~~~~~ + + + +
+ animation1 +
Ellipsographe
+
+
+ +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. +
+