requestAnimationFrame 如何使用

requestAnimationFrame是一种优化的动画循环方法，它可以让浏览器在下一次重绘之前执行指定的函数，以达到更加流畅的动画效果。使用requestAnimationFrame的步骤如下：
. 定义一个函数，用于执行动画效果。
2. 使用requestAnimationFrame方法调用该函数，该方法会返回一个唯一的ID，可以用于停止动画。
3. 在函数中更新动画状态，并在下一次重绘之前再次调用requestAnimationFrame方法。

下面是一个简单的示例代码：

function animate() {
  // 更新动画状态
  // ...

  // 在下一次重绘之前再次调用animate函数
  requestAnimationFrame(animate);
}

// 开始动画
requestAnimationFrame(animate);

// 停止动画
cancelAnimationFrame(rafId);

在上面的代码中，animate函数用于执行动画效果，使用requestAnimationFrame方法调用该函数，并将返回的ID保存在rafId变量中，以便在需要停止动画时使用cancelAnimationFrame方法。在animate函数中更新动画状态，并在下一次重绘之前再次调用requestAnimationFrame方法，以达到流畅的动画效果。