Fabrication à partir d'un fichier PDF
Nous avons à disposition un fichier PDF contenant les différentes images de l'animation qu'on souhaite produire. On le transforme en un ensemble d'image SVG avec la commande suivante (sous linux) :
pdf2svg delaunay.pdf svg/delaunay%d.svg allLe code CSS
On configure l'apparence de l'animation et des boutons avec un peu de CSS.
#anim1 {
position:relative;
margin: 10px auto;
width: 500px;
padding: 0;
}
.message {
background : #6e6e6e;
color : white;
font-size : 90%;
margin-top : 5px;
padding : 6px;
border-radius : 4px;
}
#anim1_boutons{
text-align:center;
}
.SVGbutton{
text-align:center;
margin-top:5px;
}
button.SVGplay {
color: #ffffff;
background: #6e6e6e;
padding: 5px 10px 5px 10px;
border: solid #575757 0.1px;
text-decoration: none;
float:none;
height: 50px;
}
button.SVGplay:hover {
background: #951515;
text-decoration: none;
transition:0.4s;
color:white;
}
img.boutonSVG{
vertical-align:middle;height:20px;padding:0px;background-color:transparent;
}Le code JavaScript
L'animation est construite par une instance d'Animation et contrôlée par une instance de SVGPlayerButtons. Ce player est configurable et propose une palette étendue d'actions.
Ici nous allons le personnaliser en choisissant les éléments à afficher et ce qu'on met dans les boutons tout en personnalisant l'affichage grâce au code CSS ci-dessus.
On ne va garder pour cette animation que les boutons d'avance et de recule, image par image.
$(window).load(function() {
a1 = new Animation("anim1","svg/delaunay",1,16);
a1.loopOnload();
a1.delai = 1500;
b1 = new SVGPlayerButtons(a1);
b1.stopBtn = false;
b1.playBtn = false;
b1.startBtn = true;
b1.endBtn = true;
b1.speedupBtn = false;
b1.slowdownBtr = false;
b1.previousBtn = true;
b1.nextBtn = true;
b1.nextBtnName = '<img src="player-3.svg" class="boutonSVG"/>';
b1.previousBtnName = '<img src="player-4.svg" class="boutonSVG"/>';
b1.startBtnName = '<img src="player-6.svg" class="boutonSVG"/>';
b1.endBtnName = '<img src="player-5.svg" class="boutonSVG"/>';
b1.connect();
});Les images SVG que l'on place dans les boutons de contrôle sont produite grâce à MetaPost et son disponible en bas de page (code et images).
Le code HTML
Le code HTML est le suivant :
<div id="anim1">
<img src="svg/delaunay0.svg" alt="animation1" style="top:0;left:0;width:500px"/>
<div class="message" id="anim1_message">Images en cours de chargement...</div>
<div id="anim1_boutons"></div>
</div>
