清除requestAnimationFrame

要清除一个正在运行的 `requestAnimationFrame`，你可以使用 `cancelAnimationFrame` 方法。你需要将 `requestAnimationFrame` 返回的 id 作为参数传递给 `cancelAnimationFrame`，以便取消该帧的执行。

下面是一个示例代码：

// 运行 requestAnimationFrame，并保存返回的 id
const animationId = requestAnimationFrame(animationLoop);

// 取消 requestAnimationFrame
cancelAnimationFrame(animationId);

function animationLoop() {
  // 动画逻辑
  // ...

  // 递归调用 requestAnimationFrame
  requestAnimationFrame(animationLoop);
}

在上面的代码中，`animationLoop` 函数是一个递归调用的动画循环函数。通过调用 `cancelAnimationFrame(animationId)`，你可以停止该循环的执行。

相关问题

vue requestAnimationFrame 如何使用和清除

Vue中可以使用`requestAnimationFrame`来执行动画或者其他需要在每一帧执行的操作。下面是一个使用和清除`requestAnimationFrame`的示例：

使用`requestAnimationFrame`：

// 在Vue组件中使用requestAnimationFrame
export default {
  data() {
    return {
      animationId: null, // 保存requestAnimationFrame的返回值
    };
  },
  mounted() {
    this.startAnimation();
  },
  methods: {
    startAnimation() {
      this.animationId = requestAnimationFrame(this.animate);
    },
    animate() {
      // 执行动画或其他操作
      // ...

      // 继续下一帧动画
      this.animationId = requestAnimationFrame(this.animate);
    },
  },
  beforeDestroy() {
    this.stopAnimation();
  },
  methods: {
    stopAnimation() {
      cancelAnimationFrame(this.animationId);
    },
  },
};

清除`requestAnimationFrame`：

// 在Vue组件中清除requestAnimationFrame
export default {
  data() {
    return {
      animationId: null, // 保存requestAnimationFrame的返回值
    };
  },
  mounted() {
    this.startAnimation();
  },
  methods: {
    startAnimation() {
      this.animationId = requestAnimationFrame(this.animate);
    },
    animate() {
      // 执行动画或其他操作
      // ...

      // 判断是否需要停止动画
      if (shouldStopAnimation) {
        this.stopAnimation();
      } else {
        // 继续下一帧动画
        this.animationId = requestAnimationFrame(this.animate);
      }
    },
    stopAnimation() {
      cancelAnimationFrame(this.animationId);
    },
  },
};

requestAnimationFrame怎么暂停

### 如何暂停 `requestAnimationFrame`

为了实现 `requestAnimationFrame` 的暂停功能，可以采用取消当前的动画帧请求并停止调用循环的方式。通过设置一个标志变量来控制是否继续执行下一帧的逻辑，在需要暂停时改变这个标志的状态即可。

let animationId;
let isPaused = false;

function loop() {
    if (isPaused) {
        return; // 如果已暂停，则不执行后续操作
    }
    
    addIconParticles(); // 添加新粒子用于上传图标
    updateParticles();  // 更新所有粒子状态
    renderParticles();  // 清除 canvas 并重绘所有粒子

    animationId = requestAnimationFrame(loop);
}

// 暂停方法
function pauseAnimation() {
    isPaused = true;
    cancelAnimationFrame(animationId); // 取消正在进行的动画帧请求
}

// 继续播放方法
function resumeAnimation() {
    isPaused = false;
    loop(); // 手动触发一次循环以恢复动画
}

当希望暂停动画效果时，只需调用 `pauseAnimation()` 函数；而要重新启动动画，则应使用 `resumeAnimation()` 来恢复正常运行流程[^1]。