防止元素在画布中突然跳跃？

Question

This is my pseudocode:

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

My move function looks like this:

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

In some cases, the element does not move at all. For those situations, I have the following code :

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

This does not change the position of my circle gradually but draws it abruptly some distance away . I don't understand why is that happening. Could anyone help me debug the issue? Let me know if I need to post more code.

This is my 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 : The while loop was not inside the animation function but now it is. However, it did not make any difference at all.

Answer 1

The problem is that You're using setInterval instead of requestAnimationFrame - it's more reliable way to do this kind of operations on canvas.

Please check this tutorial - author solves this problem pretty straightforward on example.