canvas动画需时间驱动而非帧数驱动，以performance.now()或外部时间源为基准计算progress，再通过插值函数（如线性、贝塞尔、缓动）映射图形状态，并严格绑定requestanimationframe执行渲染流程。
Canvas图形动画要真正“同步”时间轴，关键不是让动画跟着钟表走，而是让每一帧的视觉状态严格对应当前播放时间点——这需要把动画逻辑从“帧数驱动”转向“时间驱动”，并用 requestAnimationFrame 作为调度中枢。
时间轴必须是数值化的播放进度
动画不能依赖循环次数或手动计数器。时间轴应统一用毫秒（或秒）表示，比如视频回放中某个时刻是 12480ms，路径动画总时长设为 5000ms，那么当前进度就是 progress = Math.min(currentTime / 5000, 1)。这个 progress 值直接决定图形位置、旋转角度、透明度等所有状态。
- 避免用 for 循环 + i++ 控制帧数，它和真实时间脱钩
- 起始时间用 performance.now() 记录，后续每帧都用当前时间减去它，算出已过时长
- 如果时间轴来自外部（如视频 currentTime），就直接读取该值，不另起计时器
所有状态更新必须基于 progress 插值计算
图形在时间轴上的任何变化，都要通过插值函数映射到 progress 上。例如旋转动画不是“每帧加1度”，而是 angle = startAngle + (endAngle - startAngle) * easing(progress)；路径移动不是“每帧挪一个像素”，而是 point = getPointOnPath(progress)。
宝塔面板11.3.0是一款针对Linux服务器设计的可视化管理工具，通过重构核心模块实现资源占用显著降低，尤其适合低配置服务器环境。它将复杂的命令行操作转化为直观的图形界面，帮助开发者快速完成网站部署、环境配置及日常运维工作，无需专业技术背景即可高效管理服务器。
- 直线运动：用线性插值 p = p0 + (p1 - p0) * progress
- 贝塞尔路径：用 De Casteljau 或公式求 t = progress 对应坐标
- 推荐使用缓动函数（如 easeInOutQuad），让启停更自然
- 若路径曲率变化大，需先做弧长归一化，否则匀速 progress 会导致速度忽快忽慢
渲染必须绑定 requestAnimationFrame
requestAnimationFrame 不仅提供与屏幕刷新率一致的执行节奏，更重要的是它把 JS 执行和浏览器渲染管线对齐。每次回调中，先计算当前 progress，再更新所有状态，最后调用 draw —— 这个顺序保证了视觉更新始终反映“此刻该有的样子”。
- 不要用 setInterval 或 setTimeout 模拟帧率，它们无法响应掉帧或节流
- 在 rAF 回调里检查是否超出时间轴范围，及时停止或循环
- 清空画布后立即重绘全部动态元素，避免残留或闪烁
- 复杂场景可结合离屏 canvas 预绘制静态部分，只在主 canvas 更新动态区域
交互操作要实时校准时间轴
当用户拖动时间轴滑块、点击某时刻或跳转到指定时间点，不能简单重置 progress 并跳帧。应立刻用新时间重新计算所有状态，并在下一帧完整呈现，同时保持 rAF 循环继续运行。
- 暂停时保留当前 time 和 lastTimestamp，恢复时用差值补偿已流逝时间
- 拖动过程中持续监听 mousemove/touchmove，实时更新 currentTime 和 progress
- 跳转后不重置动画计时器，而是让后续 rAF 自然延续，避免卡顿或错位
- 时间轴缩放（如双指缩放）需重新计算 duration 和各关键点的时间映射关系
