Verhindern, dass Elemente abrupt in die Leinwand springen?

Question

Das ist mein Pseudo-Code:

when move button is pressed: 
    currentCirclePos = circleX; 
    moveTimer = setInterval(move, 10); 

My Move-Funktion wie folgt aussieht:

var move = function() { 
    circleX += move a bit; 
}; 

In einigen Fällen wird das Element nicht bewegen. Für jene Situationen habe ich den folgenden Code:

while(Math.abs(circleX - currentCirclePos) < some distance away){ 
    drawCircle(circleX, circleY); 
    circleX += gradual shift; 
} 

Dadurch wird die Position meines Kreises nicht allmählich ändern, sondern zieht sie abrupt some distance away. Ich verstehe nicht, warum das passiert. Könnte mir jemand helfen, das Problem zu debuggen? Lass mich wissen, wenn ich mehr Code posten muss.

Das ist mein requestAnimationFrame Code:

requestAnimationFrame(animate); 

function animate(){ 
    ctx.clearRect(0,0,cw,ch); 
    ctx.rect(0, 0, cw, ch); 
    ctx.fillStyle = 'white'; 
    ctx.fill(); 
    drawCircle(circleX, circleY); 
    requestAnimationFrame(animate); 
} 

UPDATE: Die while-Schleife nicht in der Animationsfunktion war, aber jetzt ist es. Es machte jedoch keinen Unterschied.

Answer 1

Das Problem ist, dass Sie setInterval anstelle von requestAnimationFrame verwenden - es ist eine zuverlässigere Möglichkeit, diese Art von Operationen auf Leinwand zu tun.

Bitte überprüfen Sie this tutorial - Autor löst dieses Problem ziemlich direkt am Beispiel.