X-Git-Url: https://melusine.eu.org/syracuse/G/git/?a=blobdiff_plain;f=doc%2Fpage.html;h=4efba1b703d3bd427f25d2c495ab7b1fd7f7e834;hb=6f84ad4a2ea56f7112c3981dfdd4dc62650ee71b;hp=4ce29b5f9e432e6d4f3c7ce6a89bcfe0924c4941;hpb=bb219b859367d3cbc212b5d4ad0dfd3ba6356af5;p=svganimation.git diff --git a/doc/page.html b/doc/page.html index 4ce29b5..4efba1b 100644 --- a/doc/page.html +++ b/doc/page.html @@ -23,69 +23,70 @@ });
Participants : Chupin Maxime, Sarlat Jean-Michel.
-Interface du dépôt Git : http://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=summary
-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.
+Interface du dépôt Git : http://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=summary
+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 XX, le code qui permet de charger l'animation sur demande. +Nous présentons, dans la section Chargement différé, le code qui permet de charger l'animation sur demande.
Le fichier SVGAnimation.js
(que l'on supposera dans un répertoire nommé js
) est à charger dans la page html
en mettant les lignes suivantes :
Le fichier SVGAnimation.js
(que l'on supposera dans un répertoire nommé js
) est à charger dans la page html
en mettant les lignes suivantes :
<script type="text/javascript" src="js/SVGAnimation.js"></script>
Le principe est simple : on dispose d'un ensemble d'images au format SVG qui constituent, par une suite chronologique, une animation à visionner. La libraire SVGAnimation
permet de visionner cette animation dans une page HTML grâce à JavaScript.
Le principe est simple : on dispose d'un ensemble d'images au format SVG qui constituent, par une suite chronologique, une animation à visionner. La libraire SVGAnimation
permet de visionner cette animation dans une page HTML grâce à JavaScript.
Les différentes images composant l'animation doivent se nommer avec un prefixe suivi d'un nombre (indice), celui-ci pouvant être formater de différente façons :
+Les différentes images composant l'animation doivent se nommer avec un prefixe suivi d'un nombre (indice), celui-ci pouvant être formater de différente façons :
monfichier-1.svg monfichier-2.svg monfichier-3.svg ...
ou, autre exemple :
monfichier-001.svg monfichier-002.svg monfichier-003.svg ...
-Nous verrons comment gérer le formatage de l'indice des images dans les sections suivantes.
+Nous verrons comment gérer le formatage de l'indice des images dans les sections suivantes.
-L'idée d'une telle librairie est venue du fait que le logiciel MetaPost permet de produire des images SVG, et nous l'utilisons abondamment pour la production d'animations. +L'idée d'une telle librairie est venue du fait que le logiciel MetaPost permet de produire des images SVG, et nous l'utilisons abondamment pour la production d'animations.
La librairie SVGAnimation
définit le prototype javascript Animation
. Pour l'utiliser il faut déclarer une balise HTML div
avec un identifiant (id
) unique. Choisissons pour l'exemple XXXX
. À l'intérieur de ces balises, il faut :
La librairie SVGAnimation
définit le prototype javascript Animation
. Pour l'utiliser il faut déclarer une balise HTML div
avec un identifiant (id
) unique. Choisissons pour l'exemple XXXX
. à l'intérieur de ces balises, il fautâ¯:
img
contenant un image svg
qui servira de vignette à l'animation;div
avec l'identifiant id="XXXX_message"
où XXXX
est l'identifiant de la balise englobante. Dans cette balise message, on y met, si on le souhaite, un message à afficher avant le chargement de l'animation;img
contenant un image svg
qui servira de vignette à l'animation;div
avec l'identifiant id="XXXX_message"
où XXXX
est l'identifiant de la balise englobante. Dans cette balise message, on y met, si on le souhaite, un message à afficher avant le chargement de l'animation;div
avec l'identifiant id="XXXX_boutons"
.En supposant que les images SVG se trouvent dans un répertoire nommé svg
, voici un exemple d'une telle structure :
En supposant que les images SVG se trouvent dans un répertoire nommé svg
, voici un exemple d'une telle structure :
<div id="anim1">
<img src="svg/ellipsographe-1.svg" alt="animation1"/>
<div class="message" id="anim1_message">Chargement</div>
<div id="anim1_boutons"></div>
</div>
Une fois qu'on a la structure HTML présentée ci-dessus, il est nécessaire d'ajouter un peu de code JavaScript pour permettre à l'animation de se jouer.
+Une fois qu'on a la structure HTML présentée ci-dessus, il est nécessaire d'ajouter un peu de code JavaScript pour permettre à l'animation de se jouer.
Animation
Le constructeur du prototype JavaScript s'utilise, pour l'exemple donné à la section précédente, de la façon suivante :
+Le constructeur du prototype JavaScript s'utilise, pour l'exemple donné à la section précédente, de la façon suivante :
var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
anim.loopOnload();
XXXX
est l'identifiant de la balise div
HTML englobante, svg/ellipsographe-
est le préfixe dont on a parlé plus haut, 1
est l'indice de la première image à animer, et 91
l'indice de la dernière.
XXXX
est l'identifiant de la balise div
HTML englobante, svg/ellipsographe-
est le préfixe dont on a parlé plus haut, 1
est l'indice de la première image à animer, et 91
l'indice de la dernière.
anim.loopOnload()
permet le chargement de l'animation.
Une fois celle-ci chargée, il faut en permettre la lecture qui se fait grâce à un nouvel objet nommé Controle
. Ce contrôle s'utilise en fait comme ceci :
Une fois celle-ci chargée, il faut en permettre la lecture qui se fait grâce à un nouvel objet nommé Controle
. Ce contrôle s'utilise en fait comme ceci :
var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
anim.loopOnload();
var player = new Controle(anim);
player.connect();
Nous verrons par la suite comment personnaliser le contrôle de la lecture de l'animation.
-Tout ceci n'est toujours pas suffisant car il faut exécuter ce code JavaScript. Ceci peut être fait grâce à JQuery
par exemple, en exécutant ces quatre lignes de code à l'ouverture de la fenêtre :
Nous verrons par la suite comment personnaliser le contrôle de la lecture de l'animation.
+Tout ceci n'est toujours pas suffisant car il faut exécuter ce code JavaScript. Ceci peut être fait grâce à JQuery
par exemple, en exécutant ces quatre lignes de code à l'ouverture de la fenêtre :
$(window).load(function() {
var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
anim.loopOnload();
var player = new Controle(anim);
player.connect();
});
Bien sûr, ceci nécessite le chargement, dans la page HTML, de la librairie JQuery
.
Bien sûr, ceci nécessite le chargement, dans la page HTML, de la librairie JQuery
.
Tout ceci donne le code suivant
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="../SVGAnimation.js"></script>
@@ -113,22 +114,24 @@ Chargement...
Il est possible de différer le chargement de l'animation en créant une fonction Javascript.
+On peut laisser le chargement d'une animation à la demande en créant une fonction Javascript.
function charge_anim2() {
var a = new Animation('anim2','svg/ellipsographe-',1,91);
a.loopOnload();
var b = new Controle(a);
b.connect();
}
Fonction qui sera liée à l'événement onclick
d'un bouton proposant, à l'internaute, le chargement de l'animation...
<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"/>
+Fonction qui sera liée à l'événement onclick
d'un bouton proposant justement le chargement de l'animation...
+<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>
-On peut en profiter pour adapter le style des éléments englobants.
-
+Dans le même temps, le style des éléments englobants a été adapté.
+
-Les paramètres
+Les paramètres
+L'objet Animation
ne possède que deux propriétés configurables, autres que celles (4) qui lui sont passées en argument.
+⢠delai (valeur par défaut : 50) â C'est la durée, en millisecondes, entre deux images.
+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-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
+
+
-
-
-
- - Installation
- - Principe
- - L'utilisation
- - Côté HTML
- - Côté JavaScript
- - Les paramètres
-
- - Les players
- - Exemples d'utilisation
-
-
-
\ No newline at end of file
+