HTML动画暂停恢复控制方法

本文深入解析了网页动画中“暂停与恢复”这一看似简单却极易踩坑的核心问题：CSS @keyframes 动画可直接通过原生 `animation-play-state` 无缝暂停续播，而 Canvas、Three.js 和 requestAnimationFrame 手写动画则必须手动冻结时间戳、物理状态（如速度、位置）及渲染循环，否则将遭遇重播、跳变或瞬移等严重异常；尤其强调 Three.js 需同步控制时钟与渲染器，且真正难点不在暂停操作本身，而在于精准识别并保存所有依赖时间演进的关键状态——选错方案，后续全是难以维护的补丁。

animation-play-state 是唯一能真正“暂停并从断点继续”的原生方案，但仅对纯 CSS @keyframes 动画有效。其他所有动画（Canvas、Three.js、requestAnimationFrame 手写循环）都必须自己管时间戳和状态，否则一暂停就重头开始或瞬间跳变。

用 animation-play-state 暂停 CSS 动画最简实践

它不改变当前帧样式，恢复后从暂停那一刻无缝续播，无需额外计算。关键就两行 JS：

• element.style.animationPlayState = 'paused' —— 暂停
• element.style.animationPlayState = 'running' —— 恢复
• 支持直接写在 class 里：.paused { animation-play-state: paused; }，用 classList.toggle('paused') 切换也行
• 注意：必须确保元素已应用了 animation（哪怕只是 animation: none），否则 animationPlayState 不生效

为什么 requestAnimationFrame 不能直接暂停

浏览器没有提供 pauseAnimationFrame 这种 API。cancelAnimationFrame 只能终止，再调 requestAnimationFrame 就是新循环，performance.now() 或 Date.now() 时间戳会重置，导致 delta 计算错误。

• 正确做法是：暂停时记下当前 lastTime 和已耗时 elapsed；恢复时用新帧时间减去暂停起始时间，补上“被跳过的时长”
• 常见错误：只停掉 requestAnimationFrame 调用，但没冻结 velocity、position 等状态变量 → 恢复瞬间因累积大 delta 导致瞬移或穿模
• Canvas/WebGL/Three.js 的动画都不吃 animation-play-state，别试

Three.js 暂停要双控：clock + renderer

只调 clock.stop() 不够，渲染循环还在跑，CPU 白烧、电池白掉。

• 暂停必须同步做两件事：clock.stop() + renderer.setAnimationLoop(null)
• 恢复时顺序不能反：先 clock.start()，再 renderer.setAnimationLoop(animate)
• clock.elapsedTime 在 stop() 后值保留，可直接用于插值，这点很关键
• 别依赖 clock.getDelta() 自动累加——它在 stop() 后返回 0，但你可能需要“暂停期间的虚拟流逝时间”

真正难的不是暂停动作本身，而是判断「该不该暂停」和「暂停时哪些状态必须冻结」。比如一个带物理弹跳的 Canvas 小球，暂停时不仅要停帧循环，还得把 velocity、acceleration、lastTime 全部存下来；而 CSS 动画连这些概念都没有，所以才简单。选错方案，后面全是补丁。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。