Animaciones con animate

facebook-svg gplus-svg twitter-svg

NOTA: A finales del año 2015 las animaciones SMIL ( Synchronized Multimedia Integration Language ) tenian un futuro incierto.

En el SVG hay varios elementos utilizados para animar objetos: <animate>, <animateColor> - ya obsoleto, <animateTransform>, <animateMotion> y <set>

Animación básica con animate

En el siguiente ejemplo queremos animar un rectángulo dibujado con <rect>. Para esto
1. Hay que anidar dentro del elemento <rect> un elemento <animate>.

<rect x="-110" y="20" width="100" height="80" style="fill:#6ab150; stroke:#000; >
   <animate 
       attributeName="x"
       attributeType="XML"
       from="-110" to="400"
       dur="5s"
       repeatCount="indefinite"/>
</rect>

2. Haremos que el rectángulo se desplace de izquierda a derecha. Esto quiere decir que el atributo que queremos animar es el x. Para indicar al SVG el atributo que queremos animar utilizamos attributeName.

<rect x="-110" y="20" width="100" height="80" style="fill:#6ab150; stroke:#000; >
   <animate 
       attributeName="x"
       attributeType="XML"
       from="-110" to="400"
       dur="5s"
       repeatCount="indefinite"/>
</rect>

3. El atributo x es un atributo de tipo XML.

<rect x="-110" y="20" width="100" height="80" style="fill:#6ab150; stroke:#000; >
   <animate 
       attributeName="x"
       attributeType="XML"
       from="-110" to="400"
       dur="5s"
       repeatCount="indefinite"/>
</rect>

El atributo fill en cambio es un atributo CSS ya que aparece asociado con el atributo style.

style="fill:#6ab150; stroke:#000; stroke-width:5;"

Si no especificamos el attributeType, el SVG considera que attributeType = "auto". Esto quiere decir que el SVG tendrá que averiguar el tipo de atributo que queremos animar, y esto afectara la eficacia del código.

4. Queremos que la animación empiece con el rectángulo a la izquierda, y fuera del escenario, ( x = -110 ), y que acabe cuando el rectángulo ya haya salido del escenario por la derecha ( x = 400 ). Para esto tenemos que decirle al SVG donde empieza ( from ) y donde acaba ( to ) la animación.

<rect x="-110" y="20" width="100" height="80" style="fill:#6ab150; stroke:#000; >
   <animate 
       attributeName="x"
       attributeType="XML"
       from="-110" to="400"
       dur="5s"
       repeatCount="indefinite"/>
</rect>

5. También tenemos que indicar la duración ( dur ) de la animación:

<rect x="-110" y="20" width="100" height="80" style="fill:#6ab150; stroke:#000; >
   <animate 
       attributeName="x"
       attributeType="XML"
       from="-110" to="400"
       dur="5s"
       repeatCount="indefinite"/>
</rect>

En este caso la duración es de 5 segundos, pero no es necesario que sean segundos.  Podemos utilizar otras unidades de tiempo si así lo queremos.

  • h ➛ horras
  • min ➛ minutos
  • s ➛ segundos
  • ms ➛ milisegundos

Hay más unidades de tiempo disponibles ( la especificación w3.org ): Clock values

6. También queremos que la animación se repita indefinidamente. Para esto utilizamos el atributo repeatCount.

<rect x="-110" y="20" width="100" height="80" style="fill:#6ab150; stroke:#000; >
   <animate 
       attributeName="x"
       attributeType="XML"
       from="-110" to="400"
       dur="5s"
       repeatCount="indefinite"/>
</rect>


    
        
    

Si por lo contrario queremos que la animación pase una sola vez, tenemos que utilizar fill="freeze".

Observación: en este caso el atributo fill es un atributo SMILL que dice al SVG como llenar el resto del tiempo y no hay que confundirlo con el atributo XML fill utilizado para rellenar los trazados SVG. Con fill ="freeze" el SVG congela la imagen al final de la animación.



    
        
    

Haz clic en el rectángulo para que la animación vuelva a empezar.

Animaciones múltiples

A continuación queremos animar un rectángulo en un movimiento de ida y vuelta. Para esto utilizamos dos animaciones sucesivas: la primera animación ( <animate id="anim1" ) el movimiento de ida, y la segunda animación ( <animate id="anim2" ) es el movimiento de vuelta.
La segunda animación ( id="anim2" ) empieza ( begin ) cada vez que se acaba ( end ) la primera animación.

begin="anim1.end"

La primera animación ( id="anim1" ) empieza en el segundo 0 ( 0s ), o cada vez que se acaba la segunda animación ( anim2.end ). El atributo begin acepta valores múltiples separados por punto y coma ( ; ).

begin="0s; anim2.end"



    
      
      
    

Valores múltiples con values

Podemos escribir la animación del movimiento de ida y vuelta de manera más eficiente.
Exactamente como en el ejemplo anterior, el atributo que queremos animar es el atributo x ( attributeName="x" ) que es un atributo de tipo XML ( attributeType="XML" ). También queremos que la animación dure 5 segundos ( dur="5s" ) y que se repita indefinidamente ( repeatCount="indefinite" ).  Ahora viene lo importante. Utilizamos el atributo values para comunicar al SVG los valores que queremos que tome el atributo x durante la animación. Los valores van separadas por un punto y coma ( ; ).

values="0; 300; 0"

Esto quiere decir que al inicio de la animación el valor del atributo x = 0. A continuación el valor crece hasta x = 300, y después decrece hasta llegar de nuevo a 0.