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 24 janvier 2019 - Semaine 04 - Saint François de Sales (Demain: Saint Manuel)
Aujourd'hui, c'est l'anniversaire de Daniel Auteuil (1950-69 ans), acteur français, de Nastassja Kinski (1961), actrice et mannequin allemande et de Muriel Moreno (1963), chanteuse française (du groupe Niagara). Autre 24 janvier: 2009 - Tempête Klaus sur le sud-ouest de la France (60% des forêts sont dévastées).
Haut de page Easy-Micro