Inicio de sesión
RSS
En línea
Efectos de movimiento con Javascript
Para dar impresión de movimiento, nos podemos basar en que una de las propiedades de las capas es su situación, determinada en forma de coordenadas en el eje x y en el eje y, siempre en distancia desde el borde superior (top) y el borde izquierdo (left) de la ventana en la que se define la capa. Dado que todas las características de una capa son modificables desde javascript, podemos diseñar una función que vaya modificando dichas coordenadas de tal forma que dé la impresión de que la capa se está moviendo.
Movimiento horizontal
Veamos un ejemplo con movimiento horizontal en el qu la situación inicial de la capa de la imagen es la izquierda de la pantalla, y cuando el usuario pulse el botón de mover la capa, se desplazará hacia la derecha hasta que su posición se corresponda con un límite predefinido:
<html>
<head>
<title>Movimiento horizontal</title>
</head>
<body>
<script language="javasript">
<!--
function moveLayer(){
var antx, limit = 400;
antx = parseInt(layer1.style.left);
if(antx > limit){
return true;
} else {
layer1.style.left = antx + 2;
setTimeout("moveLayer()", 5);
}
return true;
}
function returnLayer(){
layer1.style.left = 20;
return true;
}
//-->
</script>
<center>
<h3>Pantalla de Movimiento</h3>
</center>
<div id="layer1" style="position:absolute;left:20px;top:200px;visibility:visible;z-index:1">
<img src="run.gif" width="75" height="110">
</div>
<div id="layer2" style="position:absolute;left:20px;top:325px;visibility:visible;z-index:2">
<form name="miform">
<input type="button" value="Mover Imagen" onClick="moveLayer();">
<imput type="button" value="Situar Imagen" onClick="returnLayer();">
</form>
</div>
</body>
</html>
La pantalla se basa en la existencia de dos capas, (aunque la segunda capa, usada para albergar el formulario que contiene dos botontes, no es necesaria y podría no haberse definido usando el propio documento como contenedor del formulario), de las cuales, la primera se desplaza cuando se pulsa el boton "Mover Imagen", que va modificandola coordenada horizontal de situación de dicha capa. En esta función hay que destacar dos aspectos: Por una parte, que la función comprueba la situación de la capa de tal manera que si su coordenada horizontal es superior a un límite definido (variable "limit") se prodice un código de retorno y se finaliza la ejecuciñon. Por otra parte, si todavía no se ha alcanzado el límite, la función modifica la coordenada horizontal de la capa ( con lo que hemos conseguido un pequeño movimiento de 2px) y se vuelve a lanzar la misma función con una pequeña espera de 5 milisegundos, de tal forma que el movimiento que se produce no sea demasiado rápido. Al llamarse a sí misma hasta alcanzar el límite, la función provoca la ilusión del movimiento de la capa.
Por último, el botón titulado "Situar Imagen" provoca la ejecución de la función "returnLayer", que lo único que hace es asignarle a la coordenada horizontal de la capa su valor inicial. Es de destacar que si se pulsa este botón mientras se está ejecutando la funciñon del movimiento, la capa volverá a su situación inicial para despues continuar con su desplazamiento hacia la derecha.
Movimiento diagonal
Hagamos ahora una variante de tal forma que la imagen, en vez de desplazarse únicamente en horizontal. vea también modificada su coordenada vertical, de tal forma que el desplazamiento final sea a lo largo de la diagonal. El código sería:
var antx, anty limit = 400;
antx = parseInt(layer1.style.left);
anty = parseInt(layer1.style.top);
if(antx > limit){
return true;
} else {
layer1.style.left = antx + 2;
layer1.style.top = antx - 1;
setTimeout("moveLayer()", 5);
}
return true;
}
function returnLayer(){
layer1.style.left = 20;
layer1.style.top = 200;
return true;
}
Movimiento libre
Basándonos en que disponemos del evento "onmouseover", que se dispara cada vez que se mueve el ratón a lo largo de la pantalla, y que cualquier evento hace que se actualicen las propiedades x e y (coordenadas) del objeto "event" a los valores de las coordenadas del cursor en el momento de dispararse el evento en cuestión, podemos desarollar un función que hace que la imagen "persiga" al cursor a lo largo de la pantalla. Lo único que hay que hacer es actualizar los valores de las coordenadas de la capa de la imagen en cada momento en que se mueve. Dado que el evento se dispara cada vez que se mueve el cursor, si lo hacemos en forma continuada conseguiremos una actualización constante, lo que provoca la "persecución" de la capa al cursor. La función es muy sencilla y sería:
<html>
<head>
<title>Movimiento horizontal</title>
</head>
<body onmouseover="moveLayer();">
<script language="javasript">
<!--
function moveLayer(){
layer1.style.left = window.event.x - 75;
layer1.style.top = window.event.y;
return true;
}
//-->
</script>
<center><h3>Pantalla de Movimiento</h3></center>
<div id="layer1" style="position:absolute;left:20px;top:200px;visibility:visible;z-index:1">
<img src="run.gif" width="75" height="110">
</div>
</body>
</html>
Veamos ahora el código de otro ejemplo en el que la bomba se mueve por la pantalla rebotando en sus bordes:
<html>
<head>
<title>Movimiento horizontal</title>
</head>
<body onmouseover="mueveBomba();">
<script language="javasript">
<!--
var limiteSup = 0, limiteInf = 350, limiteIz = 0, limiteDer = 525;
var avanceh = 2, avancev = 2;
function mueveBomba(){
if(parseInt(bomba.style.left) < limiteIz){
avanceh = 2;
}
if(parseInt(bomba.style.left) < limiteDer){
avanceh = -2;
}
if(parseInt(bomba.style.top) < limiteSup){
avancev = 2;
}
if(parseInt(bomba.style.top) < limiteInf){
avancev = -2;
}
bomba.style.left = parseInt(bomba.style.left) + avanceh;
bomba.style.top = parseInt(bomba.style.top) + avancev;
setTimeout("mueveBomba()", 5);
}
//-->
</script>
<div id="bomba" style="position:absolute;left:20px;top:200px;visibility:visible;z-index:2">
<img id="imagen" src="bomba.gif" width="25" height="35">
</div>
</body>
</html>
Es importante que una vez que se carga el documento, con el evento "onload", se lanza la ejecución de la función "mueveBomba" y ya no para. Se puede observar que dicha función se limita a ir modificando las distancias (coordenadas) left y top de la capa en la que se encuentra la imagen de la bomba de dis en dos píxeles. Lo único que hay que tener en cuenta es que la función que mueve la capa se debe comprobar se se ha llegado a alguno de los límites de la ventana en la que se mueve (los valores de estos límites pueden variar según el tamaño de la ventana en la que se lance la ejecución y puede ser comprobados en vez de asignados). En caso de que se llegue a alguno de los límites se debe modificar el signo del número de píxeles que se le suman, con lo que la capa deshace el camino andado, dando la sensación de rebote.
Si me pudieran ayudar, yo use el ejemplo de movimiento horizontal pero necesito que cuando llegue al borde de la pantalla, la imagen se regrese sola con la misma velocidad de ida. Osea que no se necesite el boton de returnlayer. Mil gracias si me pudieran ayudar.