Easy-Micro

LANGAGE SVG Inline
Animation SVG

Réaliser des animations avec le SVG Inline

L'élément animate

La balise animate est utilisée pour animer un seul attribut ou une seule propriété au cours du temps. Exemple de barre de chargement :


<svg height="50px" width="100%">
<rect width="100" height="50" fill="red">

<animate attributeName="width" attributeType="XML"
fill="freeze"
from="0" to="100%"
begin="0s"
dur="3s"
id="anim1"/>

</rect></svg>

Explication :
  • attributName : spécifie l'attribut ou la propriété CSS à animer.
  • attributType : spécifie le type de nœud à traiter
  • fill : permet de geler l'animation arrivée à sa fin
  • from : la valeur de départ de l'animation ;
  • to : la valeur finale à atteindre ;
  • begin : l'instant de départ de notre animation;
  • dur : la durée de notre animation;

Animation en cascade

L'effet de remplissage est ici déclanché par la fin de la barre de chargement (anim1)


<svg height="150px" width="150px">
<circle cx="55" cy="55" r="50" style="stroke:black; stroke-width: 1px;fill:orange;" >

<animate attributeName="fill" id="anim2" from="orange" to="red" begin="anim1.end" dur="3s"/>

</circle></svg>

AnimateTransform : déplacement d'objet


<svg height="150px" width="100%">
<rect width="100" height="100" style="fill:blue">
<animateTransform attributeName="transform" type="translate" from="-0,0" to="100,0" begin="0s" dur="2s" repeatCount="1" fill="freeze"/>
</rect>
</svg>

animateMotion

L'élément animateMotion permet de faire défiler un objet sur un path.

<svg height="250px" width="100%">
<path id="chemin" d="M 20,20 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30" style="fill:blue"/>
<g stroke="red" stroke-width="3" fill="black">
<circle id="pointA" r="3" />
<animateMotion begin="0s" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#chemin"/>
</animateMotion>
</g>
</svg>

Note: g correspond au groupe d'objet - ici 1 seul objet, le circle

Pour aller plus loin...


Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]