动画中途停止的主因是 requestAnimationFrame 回调中未捕获错误导致调用链断裂，需在回调外层加 try...catch、检查 DOM 存活状态、资源就绪性、生命周期清理及页面可见性管理，并避免 CSS 与 JS 动画冲突。
动画中途停止时，先检查 requestAnimationFrame 的调用链是否断裂
绝大多数 requestAnimationFrame 动画突然卡住，不是因为帧率低，而是回调函数执行中抛出未捕获错误，导致后续帧不再触发。浏览器不会自动恢复中断的 RAF 链，一旦某次回调里出现 TypeError: Cannot read property 'x' of null 这类错误，整个动画就静默终止。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
requestAnimationFrame回调最外层加try...catch，至少记录错误并手动重启动画（比如重置时间戳、重新调用requestAnimationFrame） - 避免在动画回调中直接操作已被
remove()或display: none的 DOM 元素——先用element.isConnected判断存活状态 - 若使用 class 切换触发动画（如
element.classList.add('animate')），确保 CSS 中定义了对应@keyframes且未被animation-fill-mode: forwards锁死状态
JS 报错导致 RAF 停止，常见于异步资源加载未完成时访问 DOM
典型场景：动画逻辑依赖图片尺寸或 Canvas 绘图上下文，但 img.onload 还没触发，就执行了 ctx.drawImage(img, ...)，报 InvalidStateError: The image argument is not complete，进而中断 RAF。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对所有外部资源（
Image、Audio、fetch返回的 canvas 数据）做「就绪检查」：用img.complete && img.naturalWidth > 0替代单纯判断img.src是否设置 - Canvas 动画中，把绘图逻辑封装进独立函数，并在
requestAnimationFrame回调里先判断canvas.getContext('2d') !== null - 避免在组件卸载（如 React
useEffectcleanup、VuebeforeUnmount）后继续调用requestAnimationFrame——保存当前帧 ID（let rafId = 0），退出前调用cancelAnimationFrame(rafId)
生命周期管理不当：页面隐藏/失焦时未暂停，切回后时间戳错乱
document.hidden 为 true 时，浏览器可能冻结 RAF 调用，但内部时间戳（如 Date.now() 或 performance.now()）仍在走。等页面切回，动画会试图补帧，造成跳变或直接因 delta 时间过大而退出逻辑（比如缓动函数输入超出范围）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
visibilitychange事件，在document.hidden === true时调用cancelAnimationFrame(rafId)，并记录暂停时刻；恢复时重置起始时间戳，而非沿用旧值 - 不要用
setInterval模拟帧循环来“绕过” RAF 冻结——它无法响应系统节流，且在后台标签页仍可能被降频至 1fps 以下 - 对基于时间的动画（如
easeOutCubic(t / duration)），始终用performance.now()计算真实经过时间，而非依赖帧数累加
CSS 动画与 JS 动画混用时的隐性冲突
当 JS 直接修改元素 style.transform，同时该元素又有 CSS transition 或 animation 在运行，浏览器可能因样式优先级或合成层切换失败，导致视觉卡顿甚至渲染线程阻塞，表现为 RAF 回调延迟超 16ms 后被丢弃。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用冲突的 CSS 动画：在 JS 动画开始前，临时移除相关 class 或设
element.style.animation = 'none'；结束后再恢复 - 避免频繁读写布局属性（
offsetTop、getBoundingClientRect()），它们会强制同步重排；改用transform和opacity这类可 GPU 加速的属性 - 用 Chrome DevTools 的 **Rendering** 面板开启「FPS meter」和「Paint flashing」，确认是否因强制同步布局或重复重绘拖慢主线程
真正棘手的不是某一行代码写错，而是多个生命周期钩子、资源加载时机、样式计算路径在毫秒级交错影响。RAF 不是黑盒，它暴露的是整个前端运行时的状态连续性——漏掉一次 cancelAnimationFrame，少判一个 isConnected，都可能让动画在某个用户切屏瞬间永远停在那里。
