Question

我写了一个快速程序来演示我的问题。

使用以下代码，当每次更新X增加1时，移动是平滑的。但是，它也很慢，如果我将X增加8而不是它变得更加锯齿状。我尝试移动得越快，它就越不平滑。

有什么想法吗？

const canvas = document.getElementById("canvas")

const context = canvas.getContext('2d')
x = 0;
setInterval(draw, 40)

function draw() {
  //Clear canvas
  context.fillStyle = "white"
  context.fillRect(0, 0, canvas.width, canvas.height)
  //Draw black square
  context.fillStyle = "black"
  context.fillRect(x, 0, 50, 50)
  //Move square
  x += 1
}

<canvas id="canvas"></canvas>

Answer 1

您可以使用requestAnimationFrame来优化这些类型的动画。它通常以60 fps运行。

const canvas = document.getElementById("canvas")
const context = canvas.getContext('2d')
x = 0;

function draw() {
  //Clear canvas
  context.fillStyle = "white"
  context.fillRect(0, 0, canvas.width, canvas.height)
  //Draw black square
  context.fillStyle = "black"
  context.fillRect(x, 0, 50, 50)
  //Move square
  x += 1
  window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);

<canvas id="canvas"></canvas>

Answer 2

1：你每40毫秒更新一次你的画布，所以当你试图获得平滑的动画时，你有25 fps，那不是那么多。如果需要60 fps，则应将更新间隔设置为大约16 ms 现在真正的问题是，当你将x增加8或更高的值时，你的动画对象在单帧之间跳得太远，导致坏动画的原因。

要解决您的问题，您应首先将更新间隔设置为16并检查它是否足够快。如果不是，请尝试将绘制间隔降低至1，并可能将x增加2或4

如何创建平稳快速的动作

2 个答案: