X-Git-Url: https://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=blobdiff_plain;f=doc%2Fpage.html;h=983be8e377d0705aac6eb6223c9d6608e91dacc2;hp=ddd3932faffaa42926ae351362d21324cb9e36d4;hb=9fed6b5a73869d2a7491298f55e764a2fcd1fe71;hpb=bb8183de3ce11f4e748684fc8346dd39c5793628 diff --git a/doc/page.html b/doc/page.html index ddd3932..983be8e 100644 --- a/doc/page.html +++ b/doc/page.html @@ -123,11 +123,12 @@ Chargement... 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="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"/>
+
<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>

 
Dans le même temps, le style des éléments englobants a été adapté.

 

@@ -232,25 +233,47 @@ Charger l'animation
 

 
Le fichier SVGPlayerOne.js est fourni à la racine du projet SVGAnimation.

 
Exemples d'utilisation

+

+

+

 

-

-

-  ← Sections →
+

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

 

- 
 

-

\ No newline at end of file
+

+

+

+

+

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

+

+

+

+
+