Lo que aprendimos en el apartado anterior fue a mover objetos. Pero, ¿qué diferencia existe entre mover un elemento y aplicarle un movimiento animado? Pues esencialmente en lo siguiente: en el ejemplo de la página anterior, la bandera, colocada en una determinada posición, desaparecía y aparecía en otra lejana y totalmente diferente, como por arte de magia. Lo que haremos en esta parta será mover de nuevo la bandera, de una posición inicial hasta una posición final, pero veremos cómo la bandera se va moviendo, haciendo todo el recorrido entre los dos puntos extremos.

Si queremos mover la bandera hacia la derecha, hasta la posición 400, por ejemplo, lo que debemos hacer es incrementar poco a poco la propiedad left del tag, para que se desplace:

	tag.left = parseInt (tag.left) + 3

La función setTimeout

Al hacer esto, el tag se moverá tres pixels a la derecha. Por tanto, no hay más que repetir esta línea hasta que llegue a su posición final, es decir, introducir esta línea en un proceso repetitivo.

Proceso repetitivo no implica necesariamente utilizar bucles. Lo que se hace en DHTML es incluir la línea que produce la animación en una función, y tras la primera ejecución de la misma, la volvemos a llamar tras un tiempo determinado. Esto se hace con la función setTimeout. Esta función recibe dos parámetros: una función y un número. Lo que hace exactamente es llamar a la función que recibe una vez transcurrido el tiempo indicado por el segundo parámetro (expresado en milisegundos). Por ejemplo:

	setTimeout ("animar()",1000)

Esta línea llamaría a la función animar tras un segundo.

Bien, ahora que ya sabemos cómo efectuar el proceso repetitivo, ya podemos animar la bandera:

	function animar() 
	{
	    if (parseInt(tag.left) < 400) 
	    {
		tag.left = parseInt(tag.left) + 3
		setTimeout("animar()",30)
	    }
	}

Como se puede ver, cada 30 milisegundos, la bandera avanza 3 pixels. Podemos modificar la velocidad del movimiento cambiando el tiempo transcurrido entre dos llamadas a la función (segundo parámetro de la función setTimeout), y alterando también el número de pixels de diferencia entre dos posiciones consecutivas de la bandera.

Ejemplo

Evidentemente, para mover la bandera en diagonal, no habría más que modificar tanto las coordenadas left como top en cada iteración:

	function animar() 
	{
	    if (parseInt(tag.left) < 400) 
	    {
		tag.left = parseInt(tag.left) + 3
		tag.top =  parseInt(tag.top) + 3
		setTimeout("animar()",30)
	    }
	}

Ejemplo

Animar un elemento con un ángulo dado

En esta ocasión, ya no nos vale el hecho de animar un elemento en una simple línea horizontal ni vertical, ni siquiera diagonal. Ahora, nuestro objetivo esá en poder especificar un ángulo, y ver que el tag se mueve según ese ángulo. Para ello, debemos recordar algo de trigonometría básica:

Donde pixels es el número de ellos que vamos a avanzar en cada iteración (podría ser 3, como en los casos anteriores). En cada una de ellas, vamos a mover el elemento, una cantidad fija, tanto en x como en y, por ello, lo primero que haremos (y lo haremos una sola vez) será calcular estos incrementos:

	incrementoX = pixels * Math.cos(Radianes(angulo))
	incrementoY = pixels * Math.sin(Radianes(angulo))

Radianes no es más que una función que nos devuelve el ángulo que recibe, pasado a radianes:

	function Radianes(grados)
	{
	    return (grados*Math.PI) / 180
	}

Pues bien, se puede decir que ya está todo el cálculo hecho, ahora sólo que escribir la función animar:

	function Animar()
	{
	    if (parseInt(objetoBandera.left) < 400)
    	    {
		objetoBandera.left = parseInt(objetoBandera.left) + incrementoX
		objetoBandera.top  = parseInt(objetoBandera.top)  + incrementoY
		setTimeout("Animar()",30)
	    }
	}

Ejemplo

- Versión imprimible de este documento
- Enviar por e-mail este documento