Question

这是我的伪代码：

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

UPDATE：while循环不在动画函数中，但现在是。但是，它根本没有任何区别。

Answer 1

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

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

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

1 个答案: