+
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>
+
Principe
+
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.
+
La famille d'images
+
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.
+
+
+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'utilisation
+
Côté HTML
+
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â¯:
+
+une balise img
contenant un image svg
qui servira de vignette à l'animation;
+une balise 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;
+une balise 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 :
+
<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>
+
Côté JavaScript
+
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.
+
Construire l'objet Animation
+
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.
+
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 :
+
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 :
+
$ (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
.
+
Le résultat
+
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>
+<script type= "text/javascript" >
+$ (window).load (function () {
+ var anim = new Animation ('XXXX' , 'svg/ellipsographe-' , 1 , 91 );
+ anim .loopOnload ();
+ var player = new Controle (anim);
+ player .connect ();
+} );
+< /script>
+<!-- [...] -->
+<div id="XXXX">
+ <img src="svg/ellipsographe -1. svg" alt=" animation1"/>
+ < div class = "message" id= "XXXX_message" > Chargement ...< /div>
+ <div id="XXXX_boutons"></div >
+< /div>
+
dont l'affichage est :
+
+
+
+Chargement...
+
+
+
+
+
+
Chargement différé
+
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 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>
+
Dans le même temps, le style des éléments englobants a été adapté.
+
+
+
Ellipsographe
-
-
+
+
Charger l'animation
-
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
-
-
-
-
\ No newline at end of file
+
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 ();
+
+
+
+
+Ellipsographe
+
+
+
+Charger l'animation
+
+
+
+
Le fichier SVGPlayerOne.js
est fourni à la racine du projet SVGAnimation.
+
Exemples d'utilisation
+