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



Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Jeudi 20 juin 2019 - Semaine 25 - Saint Silvère (Demain: Saint Rodolphe)
Aujourd'hui, c'est l'anniversaire de Nicole Kidman (1967-52 ans), actrice australienne et américaine.
Haut de page Easy-Micro