SVG & SMIL :balise ANIMATE avec attribut restart

Jusqu'à présent toute animation déclenchée par l'utilisateur par clic peut être redémarrée par un nouveau clic sur l'objet animé. En effet par défaut l'attribut restart a la valeur always !
Ici c'est impossible. Dès que la boule de billard a été lancée on ne peut la relancer.

Cliquer sur l'une des deux boules et observez ...

Le code correspondant (à compléter)

A partir des valeurs vous devez retrouver les attributs correspondants.

<svg width="50%" height="auto" viewBox ="0 0 400 500" ... = 'background : green ; border: 10px solid maroon; box-shadow : 10px 10px 10px maroon'> <defs> <g ... ="rouge"> <circle r="10" fill ="gray" cx ="4" cy ="4"/> <circle r="10" ... ="red" ... ="0" ... ="0" /> </g> </defs> <use xlink:href ="#rouge" x ="380" y ="490"> <animate attributeName="y" dur="5s" values = "490;10;490" begin ='click' restart="whenNotActive" keyTimes ="0;0.4;1" attributeType ="XML"/> </use> <use xlink:href ="#rouge" x ="10" y ="10"> <animate ...="y" dur ="5s" ... = "10;490;10" ... ='click' restart="whenNotActive" ... ="0;0.4;1" ... ="XML" /> </use> </svg>

Commentaire du code

CSS : utilisation du CSS pour dessiner le billard avec un effet 3D (box-shadow).

Le code SVG

On définit une boule rouge ombrée identifiée "rouge".
On clone deux feux fois ce modèle et on anime : balise animate dans conteneur use.

Ces animations ne peuvent pas être suspendues (en cliquant de nouveau sur la boule dès qu'elle a été lancée). En effet l'attribut restart à la valeur whenNotActive

Ces animations ne sont pas linéaires ; la boule est plus lente au retour qu'à l'aller : 2 secondes pour l'aller et 3 secondes pour le retour grâce à l'utilisation de l'attribut keytimes.
Retour menu