From b18b5c7d0c76e52002f8372aac5f597d762c096c Mon Sep 17 00:00:00 2001 From: "Maxime Chupin (escudo)" Date: Sun, 13 Nov 2016 17:02:20 +0100 Subject: [PATCH] =?utf8?q?Doc:=20Description=20du=20fonctionnement=20*mini?= =?utf8?q?mal*,=20code=20HTML=20et=20JavaScript.=20Suppression=20de=20l'av?= =?utf8?q?ertissement=20de=20d=C3=A9pendance=20=C3=A0=20JQuery.=20Premi?= =?utf8?q?=C3=A8re=20ligne=20de=20chargement=20de=20jquery=20pour=20visual?= =?utf8?q?isation=20locale.?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit --- doc/page.html | 95 ++++++++++++++++++++++++++----- doc/page.md | 153 +++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 219 insertions(+), 29 deletions(-) diff --git a/doc/page.html b/doc/page.html index eb62d50..c150281 100644 --- a/doc/page.html +++ b/doc/page.html @@ -1,4 +1,5 @@
+

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.

-Les différents exemples se charge en cliquant sur le bouton dédié. Ceci n'est pas le comportement par défaut. 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 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.

Nous présentons, dans la section XX, le code qui permet de charger l'animation sur demande. @@ -22,15 +29,13 @@ Nous présentons, dans la section XX, le code qui permet de charger l'animat

Installation

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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
-<script type="text/javascript" src="js/SVGAnimation.js"></script>
-

La librairie SVGAnimation.js dépend de JQuery, il faut donc charger cette bibliothèque JavaScript avant.

+
<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.

+

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 suivit d'un tiret puis d'un nombre (celui-ci pouvant être formater de différente façons).

+

Les différentes images composant l'animation doivent se nommer avec un prefixe puis d'un nombre (indice), celui-ci pouvant être formater de différente façons :

monfichier-1.svg  monfichier-2.svg monfichier-3.svg ...
-

ou

+

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.

@@ -38,24 +43,82 @@ Nous présentons, dans la section XX, le code qui permet de charger l'animat 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'objet Animation

-

La librairie SVGAnimation définit le prototype javascript Animation. Pour l'utiliser il faut déclarer

-
-animation1 +

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 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é, 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" src="../SVGPlayerOne.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="anim1">
+  <img src="svg/ellipsographe-1.svg" alt="animation1"/>
+  <div class="message" id="anim1_message">Chargement</div>
+  <div id="anim1_boutons"></div>
+</div>
+

dont le résultat est :

+
+animation1
Ellipsographe
-
+
+
+animation1 +
+Ellipsographe +
+
+
-

L'utilisation

Les paramètres

Les players

SVGPlayerOne.js

SVGPlayerButtons.js

+

Exemples d'utilisation

@@ -66,14 +129,16 @@ Charger l'animation
  • Principe
    • -
  • L'objet Animation
    • \ No newline at end of file diff --git a/doc/page.md b/doc/page.md index a77c386..b05b46c 100644 --- a/doc/page.md +++ b/doc/page.md @@ -1,3 +1,4 @@ + @@ -23,7 +30,9 @@ SVG.

    Les différents exemples se charge en cliquant sur le bouton -dédié. Ceci **n'est pas** le comportement par défaut. Il s'agit +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 @@ -32,29 +41,29 @@ l'animation sur demande.

    ## Installation -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 : - -La librairie `SVGAnimation.js` dépend de `JQuery`, il faut donc charger cette bibliothèque JavaScript avant. ## 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. +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* suivit d'un tiret puis d'un nombre (celui-ci pouvant être -formater de différente façons). +*prefixe* puis d'un nombre (indice), celui-ci pouvant être +formater de différente façons : monfichier-1.svg monfichier-2.svg monfichier-3.svg ... -ou +ou, autre exemple : monfichier-001.svg monfichier-002.svg monfichier-003.svg ... @@ -68,19 +77,133 @@ abondamment pour la production d'animations.

    -## L'objet `Animation` +## L'utilisation + +### Côté HTML La librairie `SVGAnimation` définit le *prototype* javascript -`Animation`. Pour l'utiliser il faut déclarer +`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 : + +~~~~~~~ { .html } +
    + animation1 +
    Chargement
    +
    +
    +~~~~~~~ -
    - animation1 +### 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 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 : + +~~~~~~~ { .javascript } +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é, 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 : + +~~~~~~~ { .javascript } +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 : + +~~~~~~~ { .javascript } +$(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 + +~~~~~~~ { .html } + + + + + +
    + animation1 +
    Chargement
    +
    +
    +~~~~~~~ + +dont le résultat est : + +
    + animation1
    Ellipsographe
    -
    +
    -### L'utilisation + +
    + animation1 +
    Ellipsographe
    +
    +
    + ### Les paramètres @@ -89,3 +212,5 @@ La librairie `SVGAnimation` définit le *prototype* javascript ### `SVGPlayerOne.js` ### `SVGPlayerButtons.js` + +## Exemples d'utilisation -- 2.20.1