Repetir la animación
Hay dos atributos que nos permiten repetir la animación: repeatCount y repeatDur. Además podemos sincronizar una animación con la enésima repetición de otra.
Lo hacemos a través del evento repeat:
begin="identificador.repeat(n)"
El atributo repeatCount
Ya hemos utilizado en varias ocaziones el atributo repeatCount que controla cuantas veces hay que repetir una animación. El valor de este atributo puede ser
un número entero, por ejemplo: repeatCount="3" en cual caso la animación se repite 3 veces,
o si queremos que la animación se repita indefinidamente: repeatCount = "indefinite"
El atributo repeatDur
El atributo repeatDur establece cuanto tiempo hay que repetir la animación. El valor de repeatDur puede ser en unidades de tiempo ( h, min, s, ms ),
o, exacyamente como en el caso de repeatCount, la animación puede repetirse indefinidamente: repeatDur="indefinite".
Haz clic en el circulo para que la animación vuelva a empezar.
El elemento <set>
A veces necesitamos modificar el valor de un atributo durante un cierto período de tiempo. El elemento <set> nos ofrece esta posibilidad.
A continuación haremos que un círculo se desplace de izquierda a derecha ( animamos el atributo cx ). Establecemos el número de repeticiones repeatCount= "3".
Con cada repetición cambiamos el color del círculo.
1. Cuando la animación ( id="ejemploSet" ) empieza ( ejemploSet.begin ) cambiamos con <set> el color del atributo fill
( attributeType= "CSS" attributeName= "fill" ) a verde ( to="green" )
2. Cuando empieza la primera repetición ( ejemploSet.repeat(1) ) cambiamos con <set> el color del círculo a rojo ( to="red" )
3. Cuando empieza la segunda repetición ( ejemploSet.repeat(2) ) cambiamos con <set> el color del círculo a amarillo dorado ( to="gold" )
Por favor observe que aunque repeatCount="3", la animación se repite indefinidamente, ya que vuelve a empezar ( begin ) en el momento en que se acaban las tres repeticiones ( ejemploSet.end ).
<animate id= "ejemploSet"
repeatCount= "3"
begin= "0s; ejemploSet.end"
. . . .
A continuación otro ejemplo que utiliza el elemento <set> para cambiar el valor del atributo fill de dos círculos.