Animaciones acumulativas
El atributo additive
El atributo additive
controla si la animación es o no aditiva. Puede tomar dos valores: sum
, en cual caso la animación es aditiva,
o replace
, y en este caso la nueva animación substituye a la anterior.
En los siguientes ejemplos el texto <text>
es redimensionado
<animateTransform attributeName="transform"type="scale"...
y luego girado 25° en el sentido del reloj.
<animateTransform attributeName="transform" type="rotate" from= "-25" to= "0"...
La única diferencia entre los dos ejemplos es que en el primero utilizamos additive="sum"
. Esto hace que los efectos de las dos animaciones ( scale
y rotate
)
se sumen y el texto es redimensionado y girado a la vez.
En el segundo ejemplo no utilizamos el atributo additive
( cuyo valor por defecto es additive="replace"
) y en este caso la segunda animación ( rotate
)
reemplaza a la primera animación ( scale
) y el texto es girado pero no redimensionado.
El atributo accumulate
El atributo accumulate
controla si la animación es o no cumulativa.
Si accumulate="sum"
, cada repetición de la animación ( o la animación ulterior ) se suma a la anterior. Decimos que la animación es cumulativa.
Si accumulate="none"
, la animación no es cumulativa.
Donde utilizarlo
Imaginemos una animación que empieza al hacer clic ( begin="click"
) y se repite 5 veces: repeatCount="5"
. Por ejemplo un rectángulo cuya anchura crece de
0 a 25px en el plazo de 1 segundo.
Si utilizamos accumulate="sum"
la anchura del rectángulo se incrementa 5 veces en 25px ( en total 125px ). Si no utilizamos accumulate="sum"
o si utilizamos
accumulate="none"
la anchura del rectángulo aumenta en 25px, pero con cada repetición vuelve al valor inicial. El resultado es un parpadeo desagradable.
Observe por favor que en el siguiente ejemplo utilizamos additive="sum"
. Esto hace que la anchura del rectángulo al inicio de la animación sea igual a la anchura declarada del rectángulo
( width="50"
). Si no utilizamos additive="sum"
la animación empieza desde 0.
Haz clic en el rectángulo para que la animación empiece.
Otro ejemplo
La siguiente animación empieza al hacer clic en el circulo rojo ( begin="click"
). La animación se hace con <animataMotion>
y el circulo sigue una
trayectoria dibujada con path ( una curva cúbica de Bézier ) que utiliza
coordenadas relativas. La animación se repite 3 veces ( repeatCount="3"
). Al utilizar acumulate="sum"
obtenemos un efecto de pelota que rebota.
Haz clic en el círculo rojo para que la animación empiece.