如何在React中加速window.requestAnimationFrame？

Question

我目前正在从事Snake型游戏。当前，我正在更新每个渲染调用的下一步，但是，它给蛇带来了某种缓慢的速度。我试图增加每个调用中呈现步骤的数量，但是看起来很奇怪而且有错误。有什么方法可以快速做到这一点？另外：以前，我是在p5.js中完成的，而draw（）函数的确非常快。动画看起来如此逼真。

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帧，每帧约17ms。

有关动画，游戏等的所有内容都围绕：

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

因此，您可以控制的是持续时间，持续时间越短，游戏进度越快，持续时间越慢，慢动作：

请参见以下示例：https://jsfiddle.net/ibowankenobi/2k81ya5q/