基于时间线的Canvas动画引擎采用时间驱动而非帧驱动，通过统一时钟、关键帧插值、时间感知渲染和状态快照实现高精度、可控制、可重现的动画系统。
构建基于时间线的 Canvas 图形动画引擎，核心在于将动画逻辑从“帧驱动”转向“时间驱动”，让每一帧的渲染结果精确对应时间轴上的某个时刻，而非依赖渲染循环的执行节奏。这不仅能提升动画精度与可预测性，还能支持暂停、倒放、变速、关键帧插值等高级功能。
时间线抽象与统一时钟管理
时间线不是简单的时间戳累加，而是一个可控制、可查询、可同步的逻辑时序系统。
- 定义全局时间基准（如 performance.now() 或自定义起始时间），所有动画节点共享同一时间源
- 支持独立时间轨道（track）：UI 动画、粒子系统、骨骼动画可运行在不同轨道，互不干扰但能同步回放
- 提供 play()/pause()/seek(time)/rate(speed) 等标准控制接口，底层不依赖 requestAnimationFrame 的调用频率，而是根据当前播放时间计算状态
- 避免使用 Date.now() —— 它受系统时钟调整影响；优先采用 performance.now() 或封装一个单调递增的虚拟时钟
关键帧系统与插值计算
时间线引擎的价值，很大程度体现在对关键帧的表达与过渡处理能力上。
- 每个可动画属性（x、opacity、scale、color 等）可绑定一组 {time, value, easing} 的关键帧
- 渲染时，根据当前时间定位前后两个关键帧，用缓动函数（如 easeInOutCubic）插值得到中间状态
- 支持复合关键帧：例如一个对象同时有位置、旋转、缩放三组关键帧，各自独立插值后合并为最终 transform
- 预编译插值曲线（如贝塞尔控制点转成多项式系数），避免每帧重复解析字符串 easing 值
渲染调度与时间感知绘制
Canvas 渲染本身仍是逐帧进行，但帧内容必须由时间线实时推导，而非靠增量更新。
- 主循环仍用 requestAnimationFrame，但 render() 不直接操作对象属性，而是调用 timeLine.update(currentTime)，再遍历所有活跃动画节点获取其当前状态
- 对象不保存“上一帧位置”，只保存原始关键帧数据 + 当前播放时间；每次 render 都是纯函数式重算，天然支持跳转和重播
- 对静态或慢变元素（如背景、UI 框架）启用“脏矩形检测”：仅当对应时间区间内有变化才触发重绘，其余复用离屏缓存
- 支持时间锚点（time anchor）：比如某特效固定在第 2.3 秒触发爆炸，无论整体播放速率如何，它都严格按此时间发生
状态快照与跨帧一致性
时间线引擎需保证任意时刻的视觉输出完全可重现，这对调试、录屏、协同编辑至关重要。
- 提供 snapshotAt(time) 方法：返回该时刻下所有图层的完整绘制指令序列（如 [{type:'rect', x:100, y:50, ...}, {...}]），可用于离线渲染或服务端生成首帧
- 避免依赖 canvas 状态栈（save/restore）做临时样式切换；所有样式应显式传入绘制命令，确保指令流幂等
- 对随机效果（如粒子发射）引入确定性伪随机数生成器（如 Mulberry32），以 time 为 seed，使同一时间点的随机结果恒定
- 时间线实例可序列化为 JSON（含轨道、关键帧、速率曲线），方便保存、传输与版本比对
