Animaciones acumulativas

facebook-svg gplus-svg twitter-svg

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.



 
  
    additive="sum"
   
     
   
 				


 
  
    additive="replace"
   
     
   
 				
additive="sum"
additive="replace"

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.