Tengo html <img> y quiero moverlo animadamente de un lugar a otro. Por ejemplo, de 0;0 a 100;100 en la página web. Tengo la función makeStep() que toma las propiedades element.style.top y element.style.left y las cambia una vez por 0.1px .

Y luego necesito aplicar mi función muchas veces con algo de retraso. La primera decisión es hacer setInterval , como:

 var isDone = false; function makeMove() { isDone = makeStep(); if(isDone) { clearInterval(movingInterval); } } var movingInterval = setInterval(makeMove, 10);

También tengo una segunda variante con algunos sleep() hechos por habd:

 // function taken from internet const sleep = (miliseconds) => { const waitUntil = new Date().getTime() + miliseconds while(new Date().getTime() < waitUntil) { // do nothing } } var isDone = false; while(!isDone) { isDone = makeStep(); sleep(10); }

Cuando mi botón llama solo a un comando (0;0 -> 100;100), setInterval funciona perfectamente, pero sleep no vuelve a dibujar cada paso, por lo que <img> desaparece en 0;0 y aparece solo en 100;100, evitando la apariencia en 0.1; 0.1, 0.2; 0.2, etc.

Pero cuando mi botón llama a una serie de comandos, como for (cmnd in cmndList) doMove(cmnd); , setInterval se rompe. Llama a todos los comandos a la vez, así que si llamo a los movimientos 0;0->100;100->300;300, llegará a 200;200 (ya que 100;100 + 200;200 = 300;300 y es el más lejano en la cola de comandos).

Sleep tampoco funciona correctamente. Cuando toco el botón, después de unos segundos, <img> desaparece en el punto de inicio y aparece en el último punto que se calculó correctamente, pero sin llegar hasta él.

¿Cómo puedo hacer que cualquiera de estas funciones funcione y se muestre correctamente? Sé que ahora estoy inventando algo como pixi.js, pero el punto es que ahora tengo que hacerlo.