如何在 JavaScript 中停止 requestAnimationFrame

requestAnimationFrame（简称 rAF）是浏览器提供的一种 API，用于优化动画的性能。但有时候，我们需要在动画进行中停止或取消它，这就需要用到 cancelAnimationFrame（简称 cancelAF）。

如何使用

使用 requestAnimationFrame 并保存返回值作为变量：

const animationId = requestAnimationFrame(callback);

然后，在需要停止动画时，调用 cancelAnimationFrame 方法并传入保存的变量：

cancelAnimationFrame(animationId);

注意事项

• cancelAnimationFrame 必须传入 requestAnimationFrame 返回的变量，否则无法停止指定的动画。
• 如果要停止多个动画，需要分别保存它们的返回值，并分别调用 cancelAnimationFrame 方法。

示例代码

let animationId;

function animate(timestamp) {
  // 动画处理逻辑...
  animationId = requestAnimationFrame(animate);
}

// 启动动画
animationId = requestAnimationFrame(animate);

// 停止动画
cancelAnimationFrame(animationId);

总结

在熟练使用 requestAnimationFrame 的同时，能够熟练使用 cancelAnimationFrame 可以更好地掌控动画的运行状态，提高交互体验。