JavaScript para SMIL
Propiedades del elemento animado
Las propiedades baseVal y animVal
La propiedad baseVal representa el valor de un cierto atributo antes de empezar la animación, mientras que la propiedad animVal representa el valor de un cierto atributo en un momento dado durante la animación.
Por ejemplo en este caso la animación #anim esta animando el valor del atributo x.
<svg id="svg" viewBox="0 0 350 70">
<use xlink:href="#elSimbol" id="cometa" x="10" y="10" width="50" height="50" >
<animate begin="3s"
id="anim"
attributeType="xml"
attributeName="x"
from="10" to="300"
dur="5s"
repeatCount="2"
fill="freeze">
</animate>
</use>
</svg>Podemos utilizar javascript para recuperar el valor del atributo x antes de empezar la animación:
console.log(cometa.x.baseVal.value); // devuelve 10También podemos utilizar setTimeout para recuperar el valor del atributo x después de 5 segundos
setTimeout(() =>{ console.log(cometa.x.animVal.value)}, 5000);//devuelve 125.54Propiedades del elemento animación
La propiedad targetElement
La propiedad targetElement representa el elemento animado por la animación. En el ejemplo anterior
console.log(anim.targetElement);
devuelve el elemento animado con toda la estructura de atributos y elementos hijos.
Métodos del elemento animación
El método getStartTime()
El método getStartTime() devuelve un número decimal que representa el momento en tiempo (en segundos) cuando la animación tiene que empezar. En el ejemplo anterior hay una demora de 3 segundos: <animate begin="3s"
console.log(anim.getStartTime()); // devuelve 3El método getCurrentTime()
El método getCurrentTime() devuelve un número decimal representando el número de segundos trascurridos desde el momento 0 de la animación.
En el ejemplo anterior si en el javascript pongo:
setTimeout(function(){ console.log(anim.getCurrentTime())}, 5000);Esto devuelve algo como 4.998507022857666 que de hecho son 5 segundos.
El método beginElement()
Muy útil si queremos que la animación empiece en un momento en tiempo desconocido: por ejemplo cuando, al hacer scroll, el elemento svg llega a estar en el campo visual del usuario (el viewport)
El método beginElement() hace que la animación SMIL empiece en el momento en el cual lo llamamos. Es como si un nuevo valor fuera añadido a la lista de valores del atributo begin.
El método beginElementAt()
Muy similar al método beginElement(), el método beginElementAt() hace que la animación SMIL empiece después de un tiempo dado. Toma como argumento un valor numérico que representa el offset (un intervalo de tiempo) desde el momento actual hasta que la animación empiece.
El método beginElement(), es equivalente a beginElementAt(0)
El método endElement() y endElementAt()
El método endElement() puede ser utilizado para parar la animación en un cierto momento. Es como si un nuevo valor fuera añadido a la lista de valores del atributo end. El método endElement() es equivalente a endElementAt(0)
Eventos
El evento beginEvent se dispara cuando la animación empieza.
El evento repeatEvent se dispara cuando la animación se repite ( pasa si el valor del atributo repeatCount es más grande que 1 o indefinite ).
El evento endEvent se dispara cuando la animación acaba.
Abra el siguiente ejemplo en codepen y mire la consola del navegador:
See the Pen SVG Javascript para SMIL by Gabi (@enxaneta) on CodePen.
Métodos del elemento SVG padre
El método pauseAnimations() y unpauseAnimations()
OJO: Una vez parada la animación utilizando del atributo end o uno de los métodos endElement() o endElementAt() ya no puede ser reanudada. Si necesitamos parar y reanudar la animación podemos utilizar los métodos pauseAnimations(), para parrar y unpauseAnimations() para reanudar la animación. Estos son métodos del elemento SVG padre y paran todas las animaciones SMIL en curso.
svg.pauseAnimations(); svg.unpauseAnimations();
See the Pen SVG SMIL Animation - Start/Stop - a fork by Gabi (@enxaneta) on CodePen.