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 ]
Lundi 25 mars 2019 - Semaine 13 - Saint Humbert (Demain: Sainte Larissa)
Aujourd'hui, c'est l'anniversaire de Marcia Cross (1962-57 ans), comédienne américaine (rôle de Bree Van de Kamp dans Desperate Housewives). Autre 25 mars: 1918 : décès à Paris du compositeur français Claude Debussy. 1984 : Alain Prost gagne le grand prix de Formule 1 du Brésil.
Haut de page Easy-Micro