JavaScript requestAnimationFrame() 动画 API 使用指南

requestAnimationFrame() 是浏览器提供的用于执行动画效果的 API。它可以让浏览器在下一帧渲染前执行指定的函数，从而保证动画效果的流畅性和性能。

使用 requestAnimationFrame() 的步骤如下：

1. 定义要执行的动画效果函数，该函数会被传入当前时间戳作为参数。

2. 使用 requestAnimationFrame() 函数调度动画效果函数的执行，该函数会返回一个数值，表示本次请求的 ID。

3. 在动画效果函数中更新动画效果的状态，然后根据需要再次调用 requestAnimationFrame() 函数以实现循环执行。

4. 在适当的时候使用 cancelAnimationFrame() 函数取消动画效果函数的执行。

以下是一个简单的使用 requestAnimationFrame() 实现动画效果的示例代码：

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

  // 继续执行下一帧动画效果函数
  requestAnimationFrame(animate);
}

// 启动动画效果函数
requestAnimationFrame(animate);

在实际开发中，还可以使用一些工具库（如 Tween.js 等）来简化动画效果函数的编写，从而更方便地实现各种复杂的动画效果。