Balise animate avec attribut repeatDur

L'animation est ici déclenchée automatiquement, le cycle dure 10 secondes, se répète un nombre indéfini de fois mais la durée globale de l'animation dure 25 secondes ! Ombre de la boule La boule rouge

Le code SVG de la page

Je ne vous donne pas tout le code SVG. A vous de compléter ! Les coordonnées cx et cy du cercle rouge étant inférieures de 4 à celles du cercle gris. Donc les valeurs de l'attribut values seront inférieures de 4 à celles correspondant au rond gris.

<svg width="100%" height="auto" viewBox ="0 0 900 120" style ="background : lime ;margin :10px auto 10px auto ; box-shadow : 5px 5px 5px gray ;" > <desc>Ombre de la boule</desc> <circle r= '10' fill = 'gray'> <animate attributeName="cx" values = "14;104;304;504;704;894" attributeType ="XML" begin ="0s" dur="10s" repeatCount="indefinite" repeatDur ="25" /> <animate attributeName="cy" values = "64;14;114;14;114;64" attributeType ="XML" begin = '0s' dur ="10s" repeatCount="indefinite" repeatDur ="25" /> </circle> <desc>La boule rouge</desc> <circle r= '10' fill = 'red'> <animate attributeName="cx" values = "10;100;300;500;700;890" ... /> <animate attributeName="cy" values = "60;10;110;10;110;60" ... /> </circle> </svg>

Commentaire

Vous pouvez constater que CSS est sollicité pour dessiner le décor de l'animation (règle de style dans la balise SVG).

La boule animée c'est en fait deux objets SVG (deux cercles) : un cercle rempli de gris (ombre de la boule) puis un cercle rempli de rouge (boule proprement dite) dont les coordonnées du centre sont décalées de 4px par rapport à celles du rond gris.

Pour chacun des deux cercles il y a deux animations simultanées. Il faut en effet changer la valeur de cx et la valeur de cy.

Remarquez que dans chaque conteneur circle les attributs cx et cy ont disparu puisqu'ils sont décrits dans les balises animate.

Ici j'ai introduit un nouvel attribut : repeatDur (durée globale de l'animation).
Ne confondez pas l'attribut repeatDur avec l'attribut dur (durée d'un cycle).
L'attribut repeatDur est prioritaire sur l'attribut repeatCount !

Remarquez après la fin de l'animation la boule (et son ombre) retournent à la position de départ
Il aurait été préférable que la boule reste à la position atteinte après deux cycles et demi d'animation. Il aurait suffit d'ajouter dans chaque balise animate l'attribut fill avec la valeur freeze (geler l'animation).

Vous trouvez peut-être ce code un peu lourd ...
Et vous avez raison. En créant un objet composé de deux cercles l'un gris et l'autre rouge et en clonant ce modèle puis en animant ce clone on arriverait à produire un code plus succinct. Voir la page suivante : "Animation de clones". Par ailleurs on pourrait multiplier les objets SVG en clonant plusieurs fois le même original ...
Retour menu