w3.unpo<code>todo

Trasladar - animateTransform

El elemento <animateTransform> anima el atributo transform de los objetos SVG de la misma manera como <animate> anima los atributos con valores numéricos y los colores.

Un ejemplo básico

En el siguiente ejemplo queremos animar un círculo dibujado con <circle>. Para esto hay que anidar dentro del elemento <circle> un elemento <animateTransform>.
Exactamente como en el caso del elemento <animate>, tenemos que especificar el nombre del atributo y el tipo de atributo que queremos animar.

attributeName="transform"
attributeType="XML"

Sabemos que hay varios tipos de transformaciones ( trasladar con translate, redimensionar con scale,  girar con rotate, sesgar con skewX y skewY ). El atributo type de <animateTransform> indica el tipo de transformación que queremos animar.

type="translate"

El atributo values de <animateTransform> recoge las coordenadas relativas de 4 puntos clave entre los cuales queremos que se desplace el círculo. Las coordenadas son relativas al punto de origen cx, cy. En el siguiente ejemplo las coordenadas del punto de origen ( el centro del círculo ) son cx="20"  y cy="70".

<circle cx="20" cy="70" r="20" fill="#6ab150" >

<circle cx="40" cy="75" r="40" fill="#6ab150" >
    <animateTransform 
    	attributeType="XML" 
        attributeName="transform" 
        type="translate"
        values="0,0; 63,85; 170,-35; 0,0" 
        begin="0s; click" end="mouseover"
        calcMode="linear" 
        dur="4s" 
        repeatCount="indefinite" />			
</circle>

El valor del atributo values empieza con 0,0 ( values= "0,0;83,105;210,-50;0,0" ) lo que indica que al iniciarse la animación el centro del círculo esta situado en el punto cuyas coordenadas son 20,70.

El segundo punto de values es 83, 105, ( values= "0,0;83,105;210,-50;0,0" ) lo que quiere decir que el centro del circulo se desplaza desde el punto anterior ( x = 20, y = 70 ) hacia un nuevo punto cuyas coordenadas son x = 20 + 83, e y = 70 + 105.

Hablemos de calcMode

El atributo calcMode controla el movimiento entre los puntos clave de la animación ( decimos que establece una interpolación de movimiento ). El atributo calcMode puede tomar uno de estos valores:

calcMode="discrete"

Si calcMode="discrete" el objeto animado salta de un punto a otro sin interpolación alguna.

calcMode="linear"

Si calcMode="linear" el objeto animado se mueve a velocidad constante de un punto a otro ( se trata de una interpolación lineal entre valores ).

El atributo keyTimes

Si calcMode="linear" la animación acepta otro atributo: keyTimes, que define la velocidad entre los puntos clave de la animación.

El atributo keyTimes es una lista de valores separadas por punto y coma ( ; ). Cada valor de keyTimes representa un momento clave de la animación. El número de momentos clave de la animación tiene que coincidir con el número de puntos clave. Si calcMode = "linear" el primer valor de keyTimes tiene que ser 0 ( el momento 0 de la animación ) y el último valor tiene que ser 1.  Cada valor tiene que ser más grande o igual al anterior, ya que representan momentos sucesivos en el tiempo.

En el siguiente ejemplo queremos animar un círculo <circle cx="40" cy="75"... entre
- 4 puntos clave ( values= "0,0; 63,85; 170,-35; 0,0" ) y
- 4 momentos clave ( keyTimes= "0; 0.7; 0.9; 1" ).
  Al iniciarse la animación el círculo se encuentra en el punto 0,0 ( o sea x=40 e  y=75 ).

( keyTimes= "0; 0.7; 0.9; 1" )
( values= "0,0; 63,85; 170,-35; 0,0" )

El círculo tarda 70% del tiempo alocado ( dur="4s" ) para llegar al primer punto clave ( x=40+63 y=75+85 ):

( keyTimes= "0; 0.7; 0.9; 1" )
( values= "0,0; 63,85; 170,-35; 0,0" )

Cuando ya ha pasado el 90% del tiempo alocado el círculo llega al tercer punto clave ( x=40+170 y  y=75-35 ).

( keyTimes= "0; 0.7; 0.9; 1" )
( values= "0,0; 63,85; 170,-35; 0,0" )

Finalmente la animación acaba, y el círculo vuelve en el punto de partida.

( keyTimes= "0; 0.7; 0.9; 1" )
( values= "0,0; 63,85; 170,-35; 0,0" )

Haz clic en el circulo para que la animación vuelva a empezar.

calcMode="paced"

Si calcMode="paced" la animación trascurre a paso constante. Si calcMode="paced" los atributos keyTimes y keySplines  son ignorados.

calcMode="spline"

Si calcMode="spline" la velocidad entre los puntos clave no es constante. La animación obedece una función de tiempo definida por un spline cúbic Bézier.

El número de valores de keySplines tiene que coincidir con el número de puntos clave menos uno. En el siguiente ejemplo hay 4 puntos de control, y 3 valores de keySplines ( del 1^er punto al 2°, del 2° al 3° y del 3° al 4° ).

values= "0,0; 83,105; 210,-50; 0,0"
keySplines= ".5 0 .5 1; 0 .75 .25 1; 1 0 .25 .25"

Miremos de cerca uno de los valores de keySplines:

keySplines = ".5 0 .5 1; 0 .75 .25 1; 1 0 .25 .25"

Cada valor es una lista de 4 números de 0 a 1: x1 y1 x2 y2 y representan los dos puntos de control de pc1 y pc2 de la curva de Bézier. Los anclajes de la curva son mismos puntos de control de la animación.