可通过闭包封装动画状态实现独立暂停/恢复，核心是用闭包保存isPaused、lastTime、tasks，并暴露pause()/resume()方法；利用requestAnimationFrame循环中判断isPaused跳过执行，恢复时通过delta累积保证时间连续性。
可以通过闭包封装动画状态和控制逻辑，让每个动画队列拥有独立的暂停/恢复能力，核心在于用闭包保存 isPaused 状态、上一帧时间戳、待执行任务列表，并暴露可控的 pause() 和 resume() 方法。
闭包封装动画控制器
闭包的作用是隔离并持久化动画的私有状态（如是否暂停、上次执行时间、剩余任务），避免全局污染或多个队列互相干扰。一个典型的控制器结构如下：
- 内部变量
isPaused = false控制当前是否冻结执行 -
lastTime = 0记录上一次requestAnimationFrame触发的时间，用于计算真实经过时间 -
tasks = []存储待执行的动画帧函数（如更新样式、调用回调） - 返回对象包含
add(task)、pause()、resume()、start()等方法
利用 requestAnimationFrame 实现“可暂停”的循环
标准 requestAnimationFrame 无法暂停，但可以在每次回调中判断 isPaused 状态决定是否跳过执行，同时保留时间上下文：
- 在
raf回调里，先检查if (isPaused) { requestAnimationFrame(loop); return; } - 若未暂停，则用
performance.now()获取当前时间，减去lastTime得到本次耗时delta - 遍历
tasks，对每个任务传入delta，支持基于时间的平滑更新（如 easing 计算） - 更新
lastTime = now，再递归调用requestAnimationFrame(loop)
暂停/恢复时保持时间连续性
真正影响动画流畅度的是“暂停期间流逝的时间是否被跳过”。理想做法是：暂停时不更新 lastTime，恢复时用当前时间减去暂停开始时间，补上“丢失”的 delta，或直接将 lastTime 设为恢复时刻的时间 —— 这样后续帧计算不会突变。
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
立即学习“前端免费学习笔记（深入）”；
- 点击
pause()时记录pauseStartTime = performance.now() - 点击
resume()时，不重置lastTime，而是让下一次loop中的delta自动包含暂停段（即now - lastTime会变大） - 如果需要“冻结式暂停”（如暂停后 resume 从同一帧继续），则在
pause()时缓存当前帧状态，在resume()后强制执行一次同步更新
简单可用的代码示例
以下是一个最小可运行的闭包动画队列实现：
function createAnimationQueue() {
let isPaused = false;
let lastTime = 0;
let tasks = [];
let rafId = null;
<p>function loop(now) {
if (isPaused) {
rafId = requestAnimationFrame(loop);
return;
}
const delta = now - lastTime;
lastTime = now;</p><pre class='brush:php;toolbar:false;'>for (let i = 0; i < tasks.length; i++) {
tasks[i](delta);
}
rafId = requestAnimationFrame(loop);}
return { add(task) { tasks.push(task); }, pause() { isPaused = true; }, resume() { isPaused = false; if (!rafId) { lastTime = performance.now(); rafId = requestAnimationFrame(loop); } }, start() { if (!rafId) { lastTime = performance.now(); rafId = requestAnimationFrame(loop); } }, clear() { if (rafId) { cancelAnimationFrame(rafId); rafId = null; } tasks = []; } }; }
// 使用示例
const queue = createAnimationQueue();
queue.add((delta) => {
el.style.transform = translateX(${x += delta * 0.5}px);
});
queue.start();
// 暂停/恢复 buttonPause.addEventListener('click', () => queue.pause()); buttonResume.addEventListener('click', () => queue.resume());
