Animando SVG con SMIL – atributo begin
Archivado en: SMIL SVG
Con el atributo begin vamos a definir el comienzo de una animación con SMIL en SVG.
Para definir el tiempo podemos utilizar las siguientes unidades:
- h Horas
- min Minutos
- s Segundos
- ms Milisegundos
La lista de elementos donde vamos a utilizar el atributo begin son las siguientes:
- animate
- animatecolor
- animatemotion
- animatetransform
- mpath
- set
A continuación vamos a ver los diferentes valores que podemos utilizar en el atributo begin
Offset
El atributo begin es definido con el valor de la unidad de tiempo que nosotros especifiquemos, como hemos visto anteriormente la unidad puede estar en milisegundos, segundos, minutos o horas. El valor podrá ser negativo.
En el ejemplo que vamos a ver a continuación la animación comienza al segundo de cargar begin="1s"
1
2
3
4
5
6
7
8
9
<animateTransform
id="cerrar"
attributeName="transform"
type="translate"
from="0" to="1000"
dur="5s"
repeatDur="1"
begin="1s"
fill="freeze"/>
Syncbase
La animación comenzara con el inicio o final de otra animación, la cual deberá tener obligatoriamente un ID para así poder referenciarla. En primer lugar irá el id de la animación y a continuación .end o .begin. Utilizaremos .end cuando queramos que nuestra animación comience cuando termine la animación referenciada, o .begin cuando queramos que nuestra animación comience a la vez que la animación referenciada.
También podemos añadir tiempo extra al inicio de la animación, simplemente tenemos que hacerlo con el símbolo + acompañado del tiempo, por ejemplo begin="cerrar.end+5s". La animación comenzara 5 segundos después del fin de la animación con el nombre cerrar.
En el ejemplo que vamos a ver a continuación la segunda parte de la animación comenzara cuando la animación con el ID="cerrar" termine.
1
2
3
4
5
6
7
8
<animateTransform id="tapa"
attributeName="transform"
type="translate"
from="0" to="1000"
dur="5s"
repeatDur="1"
begin="cerrar.end"
fill="freeze"/>
Event
El comienzo de la animación estará definido por un evento. Los eventos que podemos emplear son los siguientes: focusin, focusout, activate, click, mousedown, mouseup, mouseover, mousemove, mouseout, DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMNodeInsertedIntoDocument, DOMAttrModified, DOMCharacterDataModified, SVGLoad, SVGUnload, SVGAbort, SVGError, SVGResize, SVGScroll, SVGZoom, beginEvent, endEvent and repeatEvent.
En el ejemplo que vamos a ver a continuación la animación comenzara con el evento mouseover, es decir, cuando el ratón pase por encima del sobre.
1
2
3
4
5
6
7
8
<animateTransform id="cerrar"
attributeName="transform"
type="translate"
from="0" to="1000"
dur="5s"
repeatDur="1"
begin="mouseover"
fill="freeze"/>
En este SVG que está disponible en CodePen la aplicación de los filtros a la imagen comienzan con el evento .click
Repeat
En el ejemplo que vamos a ver a continuación la animación se repite cuando la última animación llega a su fin, como se puede ver en el ejemplo los valores están separados por punto y coma begin="1s;barra.end"
1
2
3
4
5
6
7
8
<animateTransform id="cerrar"
attributeName="transform"
type="translate"
from="0" to="1000"
dur="5s"
repeatDur="1"
begin="1s;barra.end"
fill="freeze"/>
AccessKey
La animación comenzara cuando el usuario presione la tecla que indiquemos, lo haremos de la siguiente forma begin="accessKey(h)" , entre paréntesis ira la letra. Solo funciona en Firefox.
En el ejemplo que vamos a ver a continuación la animación comienza cuando el usuario presione la tecla h.
1
2
3
4
5
6
7
8
<animateTransform id="cerrar"
attributeName="transform"
type="translate"
from="0" to="1000"
dur="5s"
repeatDur="1"
begin="accessKey(h)"
fill="freeze"/>
wallclock
La animación comenzara con el valor de un reloj de tiempo real. La sintaxis de tiempo se basa en la sintaxis definida en ISO8601.
indefinite
El comienzo de la animación estará determinado por un “beginElement()”
Mas información en la especificación de SVG en W3C.
SCALABLE, un libro sobre SVGA lo largo de 15 capítulos, 120 páginas y más de 70 ejemplos vamos a ver todo lo que podemos hacer con SVG. Tu pones el precio, disponible desde 0$ para descargar desde LeanPub(PDF, ePUB y MOBI).