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.

Nous présentons, dans la section XX, le code qui permet de charger 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 :

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

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.

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

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

ou

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'objet Animation

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

animation1
Ellipsographe

L'utilisation

Les paramètres

Les players

SVGPlayerOne.js

SVGPlayerButtons.js

 Sections