'

SVG : balise animate avec attribut keytimes

Cliquez sur le rectangle pour démarrer l'animation.
N'hésitez pas à cliquer de nouveau sur le rectangle durant l'animation pour observer que l'animation reprend alors au début.

Le code SVG correspondant (extraits)

<svg width="100%" height="auto" viewBox ="0 0 800 150"> <rect x ='0' y = '50' height ='50' width ='50' fill ="gray"> <animate ... ="width" ... = "50;400;800" begin ="click" dur ="10s" keyTimes ="0;0.2;1" ... ='freeze' ... ="XML"/> </rect> </svg>

Commentaire du code

La largeur d'un rectangle gris passe de 50 à 800 pixels en 10 secondes. Mais la variation n'est plus linéaire (ou constante) par rapport au temps.
Il faut 2 secondes pour passer de 50 à 400 pixels puis 8 secondes pour passer de 400 à 800 pixels de large.

Vous connaissez déjà l'attribut values. La nouveauté est ici l'attribut keyTimes.
Si vous utilisez uniquement l'attribut values les différents phases de l'animation ont toutes la même durée. Par exemple si la durée totale de l'animation est de 12 secondes et qu'il y a trois phases alors chaque phase dure 4 secondes (le tiers de 12).
Avec l'attribut keyTimes on précise la durée relative de chaque phase par rapport à la durée totale (valeur de l'attribut dur).
L'attribut keyTimes doit comporter autant de valeurs que l'attribut values. La première valeur de cet attribut doit être 0 et la dernière 1. Entre ces deux valeurs indiquez des nombres décimaux compris entre 0 et 1.

Dans l'exemple les valeurs de values sont : "100;150;200"
et les valeurs de keyTimes sont : "0;0.2;1"
et la valeur de dur est "10s"
Donc la première phase dure (10 *0.2) = 2 secondes.
la phase 2 dure (10 *(1-0.2)) = 8 secondes.

Cette animation peut être redémarrée (en cliquant de nouveau sur l'objet) dès qu'elle a été lancée. En effet la valeur par défaut de l'attribut whenNotActive est "always".
Dans la page suivante vous verrez comment empêcher le visiteur de pouvoir suspendre l'animation.
Retour menu