Sliding (Desplazando)

A un movimiento animado yo le llamo desplazamiento o efecto de desplazamiento. Al usar funciones de "loops" (o repeticiones) y moviendo la capa en incrementos pequeños, puedes juntar cualquier tipo de movimientos animados que te puedas imaginar.

La idea básica es que tengas tu código para los movimientos:

block.xpos += 5
block.left = block.xpos

El cual mueve la capa a la derecha 5 pixeles. Entonces puedes poner ese código dentro de una función looping:

function 
slide() { if
	(block.xpos <  300) {
		block.xpos += 5
		block.left = block.xpos
		setTimeout("slide()",30)
	}
}

Si la aclaración if esta allí para determinar cuando parar la animación. En este caso la función parará cuando él X posición está á o arriba de 300 pixeles. El setTimeout() es lo que crea el loop (desplazamiento). Después de cierta cantidad de milisegundos, ejecutará lo que este dentro de las comillas. Entonces esta función se repetirá ella misma cada 30 milisegundos

Presiona aquí para ver este ejemplo.

No hay mucha dificultad para hacer que se mueva diagonalmente - solo tienes que cambiar los dos valores xpos (left)"izquierda " y el ypos (top) "arriba". Presiona aquí para ver este ejemplo diagonal.

Moviéndose en un ángulo

Utilizando la trigonometría que se aprende en la escuela secundaria, podremos ver como mover un elemento a cualquier ángulo. En caso que la haz olvidado aquí hay un ligero diagrama para refrescar tu memoria:

Ahora para iniciar que tu objeto tenga ángulos necesitarás 4 propiedades nuevas:

object.angle = 30
object.xinc = 5*Math.cos(object.angle*Math.PI/180)
object.yinc = 5*Math.sin(object.angle*Math.PI/180)
object.count = 0

Nosotros calculamos la incrementación de X y Y usamos estas para determinar cuanto hay que mover a los valores de la izquierda y arriba. Tienes que multiplicar el ángulo por Math.PI/180 para convertir este ángulo en radias - sin y cos que son siempre calculados en radias. La propiedad de suma será usada en la función de repetición para determinar cuantas veces curveará.

Usando mi ejemplo de cuadrado otra vez, aquí esta todo el código para mover a un elemento en un ángulo dado.

function init() {
	if (ns4) block =
  document.blockDiv
	if (ie4) block = 
	 blockDiv.style block.xpos = parseInt(block.left)
	block.ypos = parseInt(block.top)
	block.angle = 30
	block.xinc = 5*Math.cos(block.angle*Math.PI/180)
	block.yinc = 5*Math.sin(block.angle*Math.PI/180)
	block.count = 
	0  }
function

slide() { if
	(block.count <  25) {
		block.xpos += block.xinc
		block.ypos -= block.yinc
		block.left = block.xpos
		block.top = block.ypos
		block.count += 1
		setTimeout("slide()",30)
	}
	else block.count = 0
}

El if (block.count < 25) significa que la función ejecutará 25 veces antes de parar - IE4. El cuadrado se desplazara a un total de 125 unidades de pixeles.

Presiona aquí para ver el ejemplo.

También he creado otro ejemplo de ángulo que te deja cambiar el ángulo. Presiona aquí para verlo.

Casa Próxima Lección: Eventos del Teclado
copyright 1998 Dan Steinman