SVG & SMIL : attribut restart de la balise animate

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 pas suspendre le déplacement.

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