如何让requestAnimationFrame停止
时间: 2023-10-15 07:00:48 浏览: 382
html5新增的定时器requestAnimationFrame实现进度条功能
要停止 `requestAnimationFrame` 的执行,你可以使用 `cancelAnimationFrame` 函数。该函数接受一个参数,即由 `requestAnimationFrame` 返回的标识符。通过调用 `cancelAnimationFrame` 并传入该标识符,可以停止对应的动画帧请求。
下面是一个示例代码,演示如何使用 `requestAnimationFrame` 和 `cancelAnimationFrame` 来启动和停止动画:
```javascript
let animationId;
function animate() {
// 动画逻辑
animationId = requestAnimationFrame(animate);
}
// 启动动画
animate();
// 停止动画
cancelAnimationFrame(animationId);
```
在上述代码中,`animate` 函数中是你的动画逻辑。通过调用 `requestAnimationFrame(animate)`,你将启动一个循环,以每帧的速率调用 `animate` 函数。同时,将返回的标识符存储在 `animationId` 中。
当你希望停止动画时,可以调用 `cancelAnimationFrame(animationId)`,其中 `animationId` 是之前存储的标识符。这样就会停止对应的动画帧请求。
阅读全文