Animar con animateMotion

facebook-svg gplus-svg twitter-svg

Hemos visto que <animateTransform> nos permite animar objetos SVG en línea recta.

attributeName="transform" type="translate"

El elemento <animateMotion> nos permite, además de esto, animar objetos SVG a lo largo de trayectorias complejas definidas con <path>.

Un ejemplo básico

En el siguiente ejemplo dibujamos un circulo azul con <path>, y un pequeño triángulo rojo con <polygon>.
Para simplificar las cosas dibujamos tanto el trazado <path> como el triángulo <polygon> a partir del origen del lienzo SVG, lo ponemos todo en un contenedor común <g> y trasladamos el contenedor en el punto donde queremos que esté.

<g transform= "translate(55,100)" >

Queremos animar el pequeño triángulo rojo a lo largo del círculo dibujado con <path>. Para esto anidamos dentro del elemento <polygon> ( el triángulo ) un elemento <animateMotion>. El atributo path de <animateMotion> define la trayectoria a seguir por el triángulo, y su valor es igual al valor del atributo d de <path>.
Observamos que el triángulo se mueve en el sentido contrario del reloj. Si miramos con atención el valor del atributo path  nos damos cuenta que el trazado fue dibujado en este sentido.

path="m0,0 a70,70 0 1, 0 0,-1 z"





								

  
	

Dibujar arcos elipticos con <path>

En el siguiente ejemplo haremos que el pequeño triángulo rojo se desplace en el sentido del reloj. Para esto dibujamos el trazado ( el círculo azul ) en este sentido:

path= "m0,0 a70,70 0 1, 1 0,-1 z" // en el sentido del reloj
path= "m0,0 a70,70 0 1, 0 0,-1 z"// en el sentido contrario

Otro cambio respecto al ejemplo anterior es que en lugar de utilizar el atributo path para definir la trayectoria del triángulo, utilizamos el elemento <mpath>para referenciar el trazado a seguir.

<mpath xlink:href= "#path" />









  
	

El atributo rotate

En los ejemplos anteriores hemos utilizado con <animateMotion> el atributo rotate.

<animateMotion dur="10s" rotate="auto" repeatCount="indefinite" >

Esto hizo que el triangulo rojo, además de seguir la trayectoria referenciada, se ladeara automáticamente hasta quedar alineado con el pendiente de la trayectoria.
Si no utilizamos rotate="auto" el triangulo sigue desplazándose por la trayectoria referenciada, pero ya no se ladea.








 

El atributo rotate puede tomar los siguientes valores

rotate = número | auto | auto-reverse

En el siguiente ejemplo hay dos triángulos iguales: uno rojo y uno anaranjado.
Para el triangulo rojo rotate="auto", mientras que para el triangulo anaranjado rotate="auto-reverse".
Si el valor del atributo rotate es número, por ejemplo rotate="30" SVG entiende que tiene que girar el objeto animado unos 30°. Por lastima esto parece no funcionar en algunos navegadores.