Animaciones con animate
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
.