Javascript 如何在React中加速window.requestAnimationFrame？

我目前正在开发蛇型游戏。目前，我正在更新每个渲染调用的下一步，但这会使蛇的速度变慢。我试图在每次调用中增加渲染步骤的数量，但它看起来很奇怪和有问题。有什么方法可以快速做到这一点吗？ 另外：之前，我在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));
    });
  }
};

---

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

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

• 选择开始位置A、结束位置B
• 拾取持续时间（即2秒或~120帧）
• 定义t，介于0-1之间（即对于第10帧，t为10/120）
• 用所需函数（identity，或

  cos（pi/2*（1-t））

  或其他任何函数）重新映射t
• 计算A+（B-A）*t

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

请参见此示例：

---

不仅raf永远不会超过监视器刷新率，浏览器还可能实际增加帧时间，以保持节能或资源限制目标。我过去曾使用raf作为一种检查，以确保任何昂贵的逻辑不会循环/迭代过快。如果非要我猜的话，OPs渲染逻辑非常昂贵，而且优化效果很差，导致了大量的帧时间。