Hola de nuevo:
Sí, se podría decir que casi lo tienes. Con número de golpes me refería a número de llamadas a tu función
move(). En tu función veo un par de problemas:
- No tiene fin
- No empieza en (100, 100), sino en (0,0) (creo que eso es lo que dices que sigue desplazando hacia arriba)
- No funcionará en todos los navegadores por no poner las unidades a las coordenadas.
Vamos a poner un ejemplo sencillo para que no haya problemas de entendimiento. Si queremos mover un objeto desde (100, 100) a (300,300) en 200 pasos (en 200 golpes) tendremos que mover la capa 1 pixel a la derecha y un pixel hacia abajo en cada golpe. Ese
1 se calcula así:
distancia que tengo que recorrer en X = posición final en X - posicion inicial X = 300 - 100 = 200
distancia que tengo que recorrer en Y = posición final en Y - posicion inicial Y = 300 - 100 = 200
Iteraciones en las que quiero hacer el movimiento = 200
píxeles que tengo que mover mi capa en un golpe = pixeles totales que tengo que mover mi capa en X / iteraciones = 200/200 =
1
píxeles que tengo que mover mi capa en un golpe = pixeles totales que tengo que mover mi capa en Y / iteraciones = 200/200 =
1
Ahí la distancia en X y en Y en un golpe es igual, 1 y 1, pero en el caso que nos ocupa no será igual, será más en Y que en X.
La posición en X que ocupará la capa en el golpe nº 1 = posicion inicial + pixeles que tengo que mover en un golpe * golpes que llevamos = 100 + 1 * 1
En el golpe nº 2 = 100 + 1 * 2
En el golpe nº 3 = 100 + 1 * 3
En el golpe nº N = 100 + 1 * n
Luego así se deduce la fórmula general de
posición en X = posición inicial en X + aumento de posición en X en cada golpe * golpes que llevamos = x0 + ((300-100)/200) * n
He fabricado a partir de tu función una más genérica para mover cualquier capa desde cualquier punto a cualquier punto en el número de golpes que quieras:
Código PHP:
<html>
<head>
<script type="text/javascript">
function move(elId, x0, y0, x1, y1, golpesTotales, golpeActual) {
var obj = document.getElementById(elId);
if( !golpeActual )
golpeActual = 1;
obj.style.left = x0 + Math.round(((x1 - y0)/golpesTotales)*golpeActual) +"px";
obj.style.top = y0 + Math.round(((y1 - y0)/golpesTotales)*golpeActual) +"px";
obj.innerHTML = "estoy en (" + parseInt(obj.style.left) +", "+ parseInt(obj.style.top) +")";
golpeActual++;
if( golpeActual <= golpesTotales )
setTimeout("move('"+elId+"', "+x0+", "+y0+", "+x1+", "+y1+", "+golpesTotales+", "+golpeActual+")",10);
}
document.onclick = function() { move('mover', 100, 100, 300, 500, 300) };
</script>
</head>
<body>
<div id="mover" style="position:relative; width:200px; left:100px; top:100px;">estoy en (100, 100)</div>
</body>
</html>
Ten en cuenta que cada golpe se produce cada 10ms, luego si colocas que el movimiento se haga en 3 golpes tardará 30ms en moverse.
Bueno, esa es mi chapa.
Saludos
