Una de las grandes utilidades de SVG es la posibilidad de realizar animaciones, cambiando los gráficos vectoriales representados a lo largo del tiempo. Existen dos formas de realizar animaciones en SVG, la primera consiste en utilizar elementos 'animation', y la segunda es acceder directamente al DOM del SVG y modificar atributos de los gráficos.
Las animaciones de SVG han sido definidas para permitir SMIL (Synchronized Multimedia Integration Language), esto representa una ventaja ya que se trata de un lenguaje basado en xml, enfocado a realizar presentaciones multimedia con etiquetas para variaciones temporales, transiciones, etc. Este estándar permite organizar todo lo referente a presentaciones multimedia pero en el caso de SVG nos vamos a centrar en la parte de las animaciones.
Vamos a realizar algunos ejemplos para introducir los conceptos: - Primero vamos a ver un ejemplo donde vamos a mover un rectángulo:
>rect width="200" height="100" style="fill:rgb(0,0,255);"/<
En este código tenemos declarado un rectángulo de 200x100 relleno de color azul.
<rect width="200" height="100" style="fill:rgb(0,0,255);"> <animateTransform attributeName="transform" attributeType="XML" type="translate" to=" 50,0" dur="3s"/> </rect>
Si nos fijamos introducimos dentro del rectángulo la etiqueta ‘animateTransform’ lo que nos permite crear animaciones del elemento transform, el cual recordamos permite realizar escalados, traslaciones, rotaciones, y torsiones. Concretamente aqui estamos realizando una traslación de 50 en el eje x indicada por el parámetro ‘to’, con una duración de 3 segundos indicada por el parámetro ‘dur’. Podemos modificar el parámetro type para realizar una rotación:
<animateTransform attributeName="transform" attributeType="XML" type="rotate" to=" 90" dur="3s"/>
De esta forma rotamos el rectángulo 90º. Ahora bien, todos estos cambio tras terminar se pierden, es decir no se conservan los valores cambiados a no ser que indiquemos en el parámetro ‘filll’ el estado ‘freeze’ de conservación o también podríamos decir congelación.
Supongamos un ejemplo algo más complejo, donde queremos mover primero el rectángulo y luego rotarlo, es decir primero una animación y luego otra. Esto se consigue con el parámetro begin.
<animateTransform id=”anim1” attributeName="transform" attributeType="XML" type="translate" to=" 50,0" dur="3s"/> <animateTransform begin=”anim1.end” attributeName="transform" attributeType="XML" type="rotate" to=" 90" dur="3s"/>
Como podemos observar hemos añadido el parámetro 'begin' con 'anim1.end', lo que quiere decir que esta animación empezara cuando termine la animación primera (fijémonos que a la primera animación le hemos puesto el nombre id1 como parámetro id para asi poder referirnos a dicha animación). El parámetro 'begin' nos permite indicar un offset de inicio, por ejemplo en vez de indicar que la animación 2 se inicie al terminar la 1 podríamos indicarle begin='3s' para empiece transcurridos 3 segundos desde el inicio global, de esta forma como la animación 1 dura 3 segundos, tendríamos el mismo resultado.
Esto nos da la libertad de encadenar animaciones y crear secuencias. Cabe destacar que los elementos animate no solo se usan con rectangulos, circulos o otras primitivas, sino que se pueden aplicar a agrupaciones (elementos ‘g’) para así poder mover/modificar elementos más complejos con un solo animate.
Actualmente todos los navegadores modernos soportan animaciones mediante este método, aunque explorer presenta algunas pegas a la hora de realizar morphings.
Comentarios