javascript - 防止元素在 Canvas 中突然跳动？

这是我的伪代码：

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

我的移动功能如下所示：

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

在某些情况下，元素根本不会移动。对于这些情况，我有以下代码：

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

这不会逐渐改变我的圆的位置，而是突然画出some distance away。我不明白为什么会这样。谁能帮我调试问题？让我知道是否需要发布更多代码。

这是我的requestAnimationFrame代码：

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);
}

更新：while循环不是在动画函数内部，而是现在。但是，它根本没有任何区别。

最佳答案

问题是您使用的是setInterval而不是requestAnimationFrame-这是在画布上执行此类操作的更可靠方法。

请检查this tutorial-作者通过示例非常简单地解决了这个问题。