Animaciones SVG con animateMotion

Archivado en: SMIL SVG

Vamos a ver animateMotion, y es que no solo de animate viven las animaciones SVG a través de SMIL.

Con animateMotion tenemos varias opciones para animar el elemento, podemos pasar los valores o rutas a través de los ya conocidos from y to, values y también los no tan conocidos path y mpath. A continuación vamos a ver cada uno de los metodos.

FROM y TO

Simplemente le tenemos que pasar dos valores, el primero es para la coordenada x y el segundo para la coordenada y.

Vamos a ver un ejemplo.

1 <circle fill="#F7931E" r="20">
2     <animateMotion dur="3s" from="500,0" to="400,500" repeatCount="indefinite"/>
3   </circle>
4   <circle fill="#F7931E" r="20">
5     <animateMotion dur="3s" from="300,0" to="400,500" repeatCount="indefinite"/>
6   </circle>
7   <circle fill="#F7931E" r="20">
8     <animateMotion dur="3s" from="100,0" to="400,500" repeatCount="indefinite"/>
9   </circle>

VALUES

A values también le tenemos que pasar dos valores, el primero es para la coordenada x y el segundo para la coordenada y, las parejas de coordeandas irán separadas una de otra por punto y coma.

Vamos a ver un ejemplo.

1 <circle fill="#F7931E" r="20">
2     <animateMotion dur="10s" values="40,40; 100,200; 400,100; 40,40" repeatCount="indefinite"/>
3   </circle>

PATH

Podemos hacer que los elementos se animen a través del atributo path siguiendo el trazado que le indicamos en el atributo. No viene mal recordar el post sobre el elemento path.

Vamos a ver un ejemplo.

1 <circle fill="#F7931E" r="8">
2     <animateMotion dur="10s" path="M197,167.5c0,0,433-285.5,433,0" fill="freeze" />
3   </circle>

Si queremos ganar tiempo podemos crear el trazado que queramos animar en Adobe Illustrator, una vez creado hay que convertirlo en contorno para que a la hora de exportar en SVG el trazado este en d="" y no en points="".

MPATH

Con este método lo que hacemos es animar un elemento aprovechándonos de un trazado que ya tenemos definido en el documento, simplemente lo invocamos a través de xlink:href=. No hay que olvidarse de que el elemento que invocamos tiene que estar referenciado con un id="".

Vamos a ver un ejemplo.

1 <path id="recorrido" fill="none" stroke="black" d="M197,167.5c0,0,433-285.5,433,0"/>
2 
3 
4   <text fill="red" font-size="28">HOYGAN!
5     <animateMotion dur="10s" repeatCount="indefinite">
6         <mpath xlink:href="#recorrido"/>
7     </animateMotion>
8   </text>

Atributo ROTATE

Con este atributo vamos a lograr que el elemento que animamos tenga diferentes efectos, podemos pasarle tres valores, los cuales son auto, auto-reverse y un valor numérico. Para ver que se consigue con cada uno de ellos vamos a ver un ejemplo.

El rectángulo azul tiene rotate="auto". El rectángulo rojo tiene rotate="auto-reverse". El rectángulo verde tiene rotate="200".

1 <rect x="0" y="0" width="70" height="20" stroke="#F7931E" fill="blue" r="8">
2     <animateMotion dur="10s" path="M197,167.5c0,0,433-285.5,433,0" rotate="auto" fill="freeze"/>
3   </rect>
4   <rect x="0" y="0" width="70" height="20" stroke="#F7931E" fill="red" r="8">
5     <animateMotion dur="10s" path="M197,167.5c0,0,433-285.5,433,0" rotate="auto-reverse" fill="freeze"/>
6   </rect>
7   <rect x="0" y="0" width="70" height="20" stroke="#F7931E" fill="green" r="8">
8     <animateMotion dur="10s" path="M197,167.5c0,0,433-285.5,433,0" rotate="200" fill="freeze"/>
9   </rect>

calcMode, keySplines y keyTimes

Estos tres atributos dan mucho de si, dan tanto que les dedique un post solamente a ellos. Así que mejor ir al post que copiar y pegar todo aquí.

Solamente añadir que en animateMotion el calcMode por defecto es PACED.

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).
Artículo posterior Artículo anterior