Tutorial – Animaciones nativas en SVG

Archivado en: SVG tutorial

Si hace unos días en otro post animábamos un SVG a través de CSS con animate.css, hoy vamos a animar nativamente un SVG a través de la propiedad animateTransform.

Para animar nativamente un SVG podemos recurrir a varios métodos o propiedades, podemos ver detalladamente todas las opciones de las que disponemos para animar un SVG en la página de la W3C.

Para animar un SVG a través de animateTransform tenemos a nuestra disposición:

  • translate
  • scale
  • rotate
  • skewX
  • skewY

Y aquí la lista de atributos y propiedades que podemos animar:

  • svg
  • g
  • defs
  • use
  • image
  • switch
  • path
  • rect
  • circle
  • ellipse
  • line
  • polyline
  • polygon
  • text
  • clipPath
  • mask
  • a
  • foreignObject

ROTATE

1 <animateTransform attributeType="xml"
2 attributeName="transform"
3 type="rotate"
4 from="0 1080 50"
5 to="360 180 50"
6 dur="3s"
7 repeatCount="1"
8 begin="mouseover"
9 />

La rotación del elemento puede ir de 0 a 360 grados, en este caso en el from indicaremos 0 y en to 360, así completaremos toda la rotación. El centro de la rotación estara determinado por el segundo y el tercer valor que tenemos en from y to. En dur indicaremos el tiempo que dura la animación, en este caso 3 segundos. En repeatCount indicaremos cuantas veces queremos que se repita la animación, podemos indicarle segundo y decimales, también la podemos hacer que la animación sea infinita con infinite. Por último en begin le diremos a la animación que solo se iniciara en el momento que el ratón se pose sobre los diferentes elementos que tiene la animación. También disponemos de end para indicarle a la animación cuando debe de terminar.

TRANSLATE

1 <animateTransform attributeType="xml"
2 attributeName="transform"
3 type="translate"
4 from="0"
5 to="360"
6 dur="3s"
7 repeatCount="1"
8 fill="freeze"/>

En esta animación el código es casi idéntico a la anterior, solamente hemos añadido el atributo fill con un valor de freeze, con esto conseguimos parar la animación, si no definimos este atributo la animación volverá a la posición inicial.

SCALE

1 <animateTransform attributeType="xml"
2 attributeName="transform"
3 type="scale"
4 from="1"
5 to="6"
6 dur="8s"
7 repeatCount="1"
8 />

Con scale lo que conseguimos es escalar el elemento, en este caso le decimos que vaya de 1 a 6 y que la animación dure 8 segundos.

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).