HTML5 中 requestAnimationFrame 怎么优雅地取消动画执行-H5教程-PHP中文网

优雅取消 requestAnimationFrame 的关键是保存ID并及时调用 cancelAnimationFrame，需防叠加、清内存、配生命周期，确保启停成对、作用域清晰、可控。

html5 中 requestanimationframe 怎么优雅地取消动画执行

要优雅地取消 requestAnimationFrame 动画，核心是保存上一次调用返回的 ID，并在合适时机调用 cancelAnimationFrame —— 但关键在于**及时清理、避免重复调用、防止内存泄漏和逻辑错乱**。

保存并管理 requestAnimationFrame 的 ID

每次调用 requestAnimationFrame 都会返回一个唯一数字 ID，必须保存下来才能后续取消：

不要用局部变量存储（如函数内声明），否则外部无法访问
推荐用闭包、实例属性或模块级变量维护当前动画 ID
每次发起新动画前，先检查并取消前一个（防叠加）

封装可取消的动画循环

把启动、更新、停止逻辑收拢，避免散落各处：

class AnimationLoop {
  #id = null;
  #callback = null;

  start(cb) {
    this.stop(); // 确保无残留
    this.#callback = cb;
    const step = () => {
      if (this.#callback()) { // 返回 true 继续，false 停止
        this.#id = requestAnimationFrame(step);
      }
    };
    this.#id = requestAnimationFrame(step);
  }

  stop() {
    if (this.#id !== null) {
      cancelAnimationFrame(this.#id);
      this.#id = null;
      this.#callback = null;
    }
  }
}

// 使用
const loop = new AnimationLoop();
loop.start((time) => {
  // 动画逻辑，返回 true 表示继续
  return element.style.transform = `translateX(${time % 200}px)`;
});

// 随时调用
loop.stop();