Canvas动画流畅性取决于帧生命周期的可控性，核心是状态机驱动的帧管理、离屏缓存优化、虚拟帧计数器实现时间精度控制，以及跨序列共享全局时钟同步。
Canvas 动画的流畅性不取决于单帧画得多炫，而在于帧的生命周期是否可控、可预测、可复用。复杂动画序列的核心是帧管理——不是“画得快”，而是“该画时才画、该停时就停、该跳时能跳”。
帧时间轴与状态机驱动
把动画序列看作一组有先后依赖、条件分支和中断可能的状态节点，每个节点包含：起始帧号、持续帧数、结束行为（循环/跳转/终止）、触发条件（时间/事件/数据）。用一个轻量状态机管理当前节点，并在 requestAnimationFrame 回调中按需推进。
- 定义状态对象：state = { id: 'walk', start: 0, duration: 24, next: 'idle', onExit: () => playSound('step') }
- 主循环中计算已播放帧数：elapsed = Math.floor((now - stateStartTime) / frameInterval)
- 当 elapsed >= state.duration，执行 onExit，再切换到 next 状态
关键帧缓存与离屏绘制优化
重复出现的动画片段（如角色 idle 循环、UI 按钮 hover）不应每帧重绘，而应预渲染到离屏 canvas 或 ImageBitmap 中，运行时仅 copy 绘制。尤其适用于含滤镜、阴影、路径重绘成本高的帧。
- 提前生成缓存：const cache = document.createElement('canvas'); cache.width = w; cache.height = h; const ctx = cache.getContext('2d'); drawFrame(ctx, 0);
- 播放时直接 blit：ctx.drawImage(cache, x, y);
- 对带时间偏移的循环动画，用 Math.floor(frameIndex % loopLength) 查表取对应缓存帧
时间精度控制与帧率适配
requestAnimationFrame 不保证固定帧率，但动画逻辑需按“逻辑帧”推进。引入虚拟帧计数器（vFrame），以目标帧率（如 60fps → 16.67ms/frame）为单位累积真实时间差，只在累积够一帧时更新动画状态。
立即学习“前端免费学习笔记（深入）”；
- 维护 accumulatedTime += delta，vFrame += Math.floor(accumulatedTime / targetInterval)
- 用 vFrame % totalFrames 获取当前播放帧索引，避免因卡顿导致动画“跳帧”或“拖影”
- 对需要变速的序列（如慢动作），动态调整 targetInterval，而非丢帧或插值
跨序列同步与事件注入
多个并行动画（角色动作 + 粒子特效 + UI 过渡）需共享同一时间基准，否则易出现错位。统一使用全局时钟（performance.now()）做相对时间戳，各序列注册自己的“时间窗口”和回调钩子。
- 定义时间事件：scheduler.add({ at: 1200, action: () => spawnExplosion(x, y) })
- 主循环中检查：if (now - startTime >= event.at) { event.action(); }
- 暂停时冻结 startTime，恢复时更新 startTime = now - elapsedRealTime
