如何在 React 中加速 window.requestAnimationFrame？

Question

我目前正在开发 Snake 类型的游戏。 目前，我正在更新每个渲染调用的下一步，但是它给蛇带来了一种缓慢的速度。 我试图增加每次调用中渲染的步骤数，但它看起来很奇怪而且有问题。 有什么办法可以快速做到这一点？ 另外：以前我在p5.js中做过这个，有draw() function真的很快。 动画看起来很逼真。

renderList = [];

renderMaze = (matrix) => {
  if (this.renderList.length !== 0) {
    let renderItem = this.renderList.shift();
    matrix[renderItem.pos.j][renderItem.pos.i] = renderItem;
    this.setState({ matrix }, () => {
      window.requestAnimationFrame(() => this.renderMaze(matrix));
    });
  }
};

Answer 1

您无法控制 requestAnimationFrame (rAF) 触发的速度，rAF 遵循监视器刷新率，通常为每秒 60 帧，每帧约 17 毫秒。

关于动画、游戏等的一切都围绕着：

• select 开始 position A，结束 position B。
• 选择持续时间（即 2 秒，或 ~120 帧）
• 定义 t，介于 0 - 1 之间（即对于第 10 帧，t 为 10 / 120）
• 用所需的 function 重新映射 t （身份，或cos(pi / 2 * (1 - t))或其他）
• 计算 A + (B - A) * t

因此你可以控制的是持续时间，较低的持续时间是更快的游戏进度，较长的持续时间是慢动作：

看这个例子： https://jsfiddle.net/ibowankenobi/2k81ya5q/