doc-svg/animation/index.md

layout, title, date

layout	title	date
layouts/page.njk	Animation	Last Modified

Il exite plusieurs méthodes pour animer des éléments SVG.

Javascript

Il est possible d'agir avec du javascript sur les propriétés des éléments. Il est nécessaire d'utiliser des librairies tierces pour faciliter la programmation des animations (Comme JQuery par exemple). Cette méthode n'est pas la plus simple, ni la plus rapide à mettre en oeuvre.

CSS

Les animations en CSS ont l'avantage de pouvoir être utilisées sur n'importe quel élement d'une page html. C'est la méthode la plus utilisée car elle est versatile et elle est la seule à pouvoir être utilisée sur des éléments aussi bien html que SVG.

SMIL

Le SMIL (Synchronized Multimedia Integration Language) est un langage de description au format xml Il définit des balises pour synchroniser, animer, mettre en page et établir des transitions sur des éléments multimédias tels que du texte, des images, de la vidéo, de l'audio. Le SMIL était le format d'échange des messages multimédias MMS (Multimedia Messaging Service) qui est un équivalent vidéo et image du service de message court (SMS : Short Message Service).

Le langage SMIL n'est plus guère utilisé de manière autonome, il a été intégré au format SVG.

Pourtant très simple il n'est pas aussi utilisée que les animations CSS, pourtant certaines animation ne peuvent s'effectuer qu'avec SMIL.

Animation d'attribut

la balise animate prend plusieurs paramètres pour effectuer l'opération

attributeName : l'attribut pris en compte
from : valeur de départ
to : valeur d'arrivée
values: la liste des valeurs successives de la propriété à animer, si il ya plus de 2 valeurs et que les balises from et to sont insuffisantes

minutage

begin : début de l'animation
end : fin de l'animation
dur : durée de l'animation
min : durée minimale (dans le cas où la durée de l'animation est calculée à partir d'autres éléments)
max : durée maximale
restart : indique quand l'animation peut être rejouée : always (toujours), whenNotActive (quand la forme n'est pas en cours d'une autre animation) ou never (jamais)
repeatCount : Le nombre de fois que l'animation doit se répéter ou indefinite pour une animation infinie
repeatDur : la durée totale en comptant toutes les répétitions
fill : état final de l'animation : freeze garde l'animation dans son état finale ou remove retourne à l'état initial.

calcMode : discrete, linear, paced ou spline défini comment sont calculés les points intermédiare de l'animation, l'accélération de celle-ci

interaction

<rect x="10" y="10" width="100" height="100" rx="5" ry="5" fill="3ed124">
<animate
    attributeName="rx"
    values="0;30;0"
    dur="5s"
    repeatCount="indefinite"
/>
</rect>

La balise animate est incluse dans la balise de la forme à animer.

Animation de forme (Morphing)

L'animation de forme n'est qu'une simple animation d'attribut. Seulement dans ce cas la propriété qui est animée est la propriété d d'une balise path.

Il est important que tous les chemins de l'animation possède le même nombre de poins, sinon l'animation ne peut pas être calculée.

Dessiner un chemin à l'aide de la balise path, dessiner un 2e chemin avec un nombre de point identique, puis un troisième, quatrième ....

<animate
    attributeName="d"
    attributeType="XML"
    values=" ; ; ; ;"
/>

<animate
    attributeName="d"
    attributeType="XML"
    from=" "
    to=" "
/>

Animation de déplacement

L'animation de déplacement permet de déplacer une forme suivant un chemin

<animateMotion dur="10s"
    repeatCount="indefinite"
    rotate="auto"
    path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

Dans le cas d'un chemin deja existant

<animateMotion dur="10s" repeatCount="indefinite">
  <mpath href="#cheminexistant"/>
</animateMotion>

Animation de transformation

https://la-cascade.io/guide-des-animations-svg/

https://css-tricks.com/guide-svg-animations-smil/

SMIL

Synchronized Multimedia Integration Language

MMS

Multimedia Messaging Service