SVG : Animation contrôlée par le visiteur

Animation déclenchée par le visiteur

Cliquez sur le carré de couleur orange pour démarrer l'animation de ce dernier !

Le code SVG correspondant à cette animation

<svg width="50%" height="auto" viewBox ="0 0 400 400"> <rect x="0" y="0" width ="50" height ="50" fill ="orange"> <animate attributeType ="XML" attributeName="width" values = "50;400;50" begin="click" dur="20s" repeatCount="indefinite"/> <animate attributeType ="XML" attributeName="height" values = "50;400;50" begin="click" dur="20s" repeatCount="indefinite"/> </rect> </svg>

Commentaire

La conteneur rect contient deux fois la balise animate car il y a animation de l'attribut width et de l'attribut height pour le même objet SVG.
Remarquez que dans chaque balise animate l'attribut begin a la valeur click !
Il s'agit donc d'un animation déclenchée (par le visiteur) et non pas d'une animation automatique comme dans la page précédente.
L'attribut repeatCount a la valeur indefinite. Donc dès que l'animation est déclenchée elle se répète de façon infinie.

Animation arrêtée par le visiteur

Cliquez sur le carré de couleur verte pour stopper l'animation de celui-ci !

Le code SVG correspondant

<svg width="50%" height="auto" viewBox ="0 0 400 400"> <rect x="0" y="0" width ="50" height ="50" fill ="green" id ="carre"> <animate attributeType ="XML" attributeName="width" values = "50;400;50" begin="0s" dur="20s" repeatCount="indefinite" end ="carre.click"/> <animate attributeType ="XML" attributeName="height" values = "50;400;50" begin="0s" dur="20s" repeatCount="indefinite" end ="carre.click"/> </rect> </svg>

Commentaire

L'animation sur le carré vert est déclenchée automatiquement (lors du chargement de la page) mais le visiteur peut la stopper à tout moment en cliquant sur l'objet.

Le carré vert est identifié : carre.
Nous pouvons donc écrire dans chaque balise animate : end ="carre.click"

Nous avons donc introduit ici un nouvel attribut pour la balise animate : l'attribut end qui est prioritaire sur l'attribut repeatCount : l'animation se répète à l'infini tant qu'on ne clique pas l'objet identifié "carre".

Notez qu'après avoir cliqué sur le carré vert ce dernier reprend sa taille initiale. Nous verrons plus loin que l'on peut "geler" l'animation.

Animation démarrée et stoppée par le visiteur

En bas du canevas SVG il y a deux boutons : un rouge et un vert.
Cliquez sur le bouton vert pour démarrer l'animation du rond jaune et sur le bouton rouge pour l'arrêter.
Le rond jaune devient de plus en plus grand et sa couleur de fond est de plus en plus opaque. Les boutons de commande Le rond objet de l'animation

Le code SVG correspondant

<svg width="50%" height="auto" viewBox ="0 0 400 400"> <desc>Les boutons de commande</desc> <rect x="0" y="350" width ="100" height ="50" rx ="5" fill ="green" id ="go" /> <rect x="200" y="350" width ="100" height ="50" rx ="5" fill ="red" id ="stop" /> <desc>Le rond objet de l'animation</desc> <circle cx="50%" cy="50%" r ="20" style ="fill : yellow ; fill-opacity :0.2;" > <animate attributeType ="XML" attributeName="r" values = "20;150" begin = "go.click" dur="10s" end ="stop.click" fill ="freeze"/> <animate attributeType ="CSS" attributeName="fill-opacity" from = "0.2" to ="1" begin = "go.click" dur="10s" end ="stop.click" fill ="freeze"/> </circle> </svg>

Commentaire

Donc nous pouvons écrire dans chaque balise animate : begin="go.click" et end ="stop.click"

Remarquez que dans la balise circle la transparence de remplissage (fill-opacity) a été passée comme propriété de style (et non pas comme attribut). Donc si vous animez cette transparence il s'agit d'une animation de type "CSS" !

Vous pouvez remarquer que dès que vous cliquez sur le bouton rouge le rond jaune garde la taille atteinte. On dit que nous "gelons" désormais l'animation et ceci via fill ="freeze".

Attention l'attribut fill existe aussi avec les balises de forme (rect, circle, ellipse, etc.) pour remplir le contenu d'une certaine couleur.
L'attribut fill de la balise animate a pour valeur par défaut remove !
Avec la valeur freeze l'objet animé garde l'état atteint à la fin de l'animation.

Nos boutons de commande ne sont pas légendés. C'est dommage mais il suffirait d'utiliser la balise text pour remédier à cet inconvénient.
Retour menu