HTML5动画为何常驻_动画常驻清除法【攻略】_技术教程

动画常驻是因为 requestAnimationFrame 没被 cancelAnimationFrame 清除，它持续触发回调直至显式取消；需保存 ID 并在组件卸载、页面隐藏等时机调用 cancelAnimationFrame 清理。

动画常驻是因为 requestAnimationFrame 没被 cancel

HTML5 动画常驻，绝大多数情况是 requestAnimationFrame 启动后没调用 cancelAnimationFrame 清除。它不像 setTimeout 那样自动结束，一旦开始就会持续触发回调，哪怕元素已移出视口、DOM 已被移除、页面切换到后台——只要回调函数还存在且未被取消，浏览器就继续调度帧。

常见误操作包括：

在组件卸载（如 React useEffect 清理函数、Vue beforeUnmount）中忘记调用 cancelAnimationFrame
把 requestAnimationFrame ID 存在局部变量里，但作用域外无法访问，导致无法清除
重复调用动画启动逻辑，生成多个 ID，但只保存了最后一个，其余“失控”
在事件监听器中反复注册动画循环，却没做防重或清理

如何安全启动并清除 requestAnimationFrame 循环

关键在于：每次调用 requestAnimationFrame 返回的 ID 必须被保留，并在适当时机传给 cancelAnimationFrame。推荐封装成可控制的结构：

let animationId = null;

function animate() {
  // 动画逻辑，例如更新 transform 或 opacity
  if (shouldContinue) {
    animationId = requestAnimationFrame(animate);
  }
}

// 启动
animationId = requestAnimationFrame(animate);

// 清除（务必在组件销毁、暂停、条件不满足时调用）
if (animationId !== null) {
  cancelAnimationFrame(animationId);
  animationId = null;
}

注意点：

animationId 必须是跨调用可访问的变量（闭包、实例属性、ref 等），不能是函数内临时变量
清除前判空，避免重复调用 cancelAnimationFrame 报 InvalidArgument 警告
若使用类或 Hook，建议将 animationId 存在 ref（React）或 instance property（class）中

动画进入后台/标签页失焦时要不要停？

要停。浏览器在非活跃标签页中会大幅降低 requestAnimationFrame 的触发频率（甚至冻结），但回调仍可能在切回时集中执行，造成卡顿或状态错乱。更稳妥的做法是监听页面可见性变化：

function handleVisibilityChange() {
  if (document.hidden) {
    if (animationId !== null) {
      cancelAnimationFrame(animationId);
      animationId = null;
    }
  } else {
    if (animationId === null && shouldContinue) {
      animationId = requestAnimationFrame(animate);
    }
  }
}

document.addEventListener('visibilitychange', handleVisibilityChange);

补充说明：

document.hidden 是标准 API，兼容所有现代浏览器
不要依赖 blur / focus，它们不反映标签页可见性
某些复杂动画（如音频同步、物理模拟）需额外暂停内部计时器，仅停 rAF 不够

用 CSS 动画替代 JS 动画能避免常驻问题吗？

能，但有前提。CSS @keyframes + animation 属性本身无常驻风险——动画播完即停，不主动触发就不会持续消耗资源。但要注意这些陷阱：

写了 animation-iteration-count: infinite 却没在合适时机用 JS 移除 animation 类或重置 animation-play-state
用 animation-play-state: paused 暂停后，忘记恢复或未正确清理，导致 DOM 上残留无效动画状态
通过 element.style.animation = '…' 动态设置动画，但后续没清空该内联样式，下次复用时可能意外触发
CSS 动画结束后未监听 animationend 事件做收尾，比如未还原 transform 或释放占位元素