rAF通过统一分发高精度时间戳实现多动画时间同步，所有动画共享同一帧时间基准并主动校准；需结合媒体currentTime映射、seeked监听及Web Worker分离计算以保障一致性。
requestAnimationFrame（rAF）本身不直接“解决”多动画时间同步问题，而是提供了一个统一、可靠的时间调度机制，让开发者能基于同一帧节奏主动对齐多个动画的时间逻辑。关键不在“同时触发”，而在“每帧共用一个时间基准并主动校准”。
所有动画共享同一时间戳参数
rAF 回调函数接收一个 DOMHighResTimeStamp 参数，这个时间戳由浏览器在每一帧渲染前统一分发，精度达毫秒级小数点后三位，且同源页面内所有 rAF 回调拿到的是同一个值。这意味着：
- 多个动画函数（如位移、缩放、颜色渐变）可基于该时间戳各自计算当前位置，无需独立计时器
- 即使动画逻辑复杂度不同、执行耗时有差异，它们的“时间感知”始终一致，避免视觉错位
- 跨 iframe 或多窗口场景下，只要同源，也能共享时间基准，支撑协同动画
以主媒体 currentTime 为锚点做动态映射
当动画需与视频、音频等媒体同步时，不能依赖 rAF 时间戳本身，而应将其作为“驱动节奏”，再读取主媒体的 currentTime 做状态映射：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 在 rAF 回调中实时读取
video.currentTime或audio.currentTime - 将该值乘以
playbackRate（处理变速播放），得到逻辑时间轴上的当前时刻 - 字幕、标注、可视化图形等全部据此计算显隐、位置、样式，而非维护自己的播放进度
- seek 后必须监听
seeked事件，立即跳转到目标时间点对应的状态，跳过插值过程
用 Web Worker 分离耗时计算，保障主线程时间一致性
若多个动画涉及大量时间戳解析、冲突排布或丢帧补偿（如密集字幕滑动、多轨道音频波形），计算可能阻塞主线程，导致 rAF 回调延迟、时间戳失真：
立即学习“前端免费学习笔记（深入）”；
- 把时间敏感的逻辑（如 PTS 缩放、窗口偏移估算）放进 Web Worker
- Worker 只接收轻量状态：当前
currentTime、playbackRate、设备帧率等 - 输出结构化结果，例如
{ start: 12.34, end: 12.89, text: "你好", render: true } - 主线程只负责根据 Worker 返回数据做最小化 DOM 更新，确保每帧都能准时响应
避免常见陷阱：timeupdate 不等于 rAF，定时器不等于同步
很多同步问题其实源于误用其他机制替代 rAF 的核心作用：
-
timeupdate事件不可靠——触发不规律、延迟常超 200ms，且不绑定刷新节奏，不能用于帧级对齐 -
setTimeout(..., 16)是伪 60fps——受主线程阻塞影响，实际可能连发或跳帧，无法保证与 VSync 对齐 - 多个
play()并发调用 ≠ 同步播放——加载、解码、缓冲差异必然造成初始偏移，必须靠后续持续校准 - 高精度节拍动画（如音乐可视化）应升级到 Web Audio API，用
audioContext.currentTime替代 media.currentTime
