updateTiming() 不会修改 playbackRate，因该方法不接受 playbackRate 参数；正确方式是直接赋值 anim.playbackRate = 2。
updateTiming() 修改 playbackRate 会失效吗
不会失效，但不能靠它改“速率”——updateTiming() 不接受 playbackRate 参数。它只更新 timing 配置（如 duration、easing、iterations），而 playbackRate 是 Animation 实例的独立属性，必须直接赋值。
常见错误是写成：anim.effect.updateTiming({ playbackRate: 2 })，这会被静默忽略，动画速度毫无变化。
- 正确改速率：直接设
anim.playbackRate = 2 - 想让动画变快且持续时间不变？改
duration同时调高playbackRate，否则视觉节奏会乱 - 设
playbackRate = 0可“冻结”动画（currentTime停止变化），但注意playState仍为"running"
updateTiming() 修改 duration 后动画跳变怎么办
修改 duration 会触发浏览器重同步关键帧采样点，如果当前 currentTime 超出新 duration 范围，动画会立刻跳到终点（或根据 fill 行为回退），造成视觉突兀。
- 安全做法：先记录当前进度比例
const ratio = anim.currentTime / anim.effect.getTiming().duration，再updateTiming()，最后重设anim.currentTime = ratio * newDuration - 若动画已结束（
playState === "finished"），updateTiming()不会自动重启，需手动anim.cancel(); anim.play() - 避免在
scroll或pointermove中高频调用 —— 每次都触发重同步，容易卡顿
为什么 updateTiming() 改了 easing 却没看到缓动变化
因为 easing 只影响“下一帧开始的插值行为”，不是实时重绘整条曲线。如果动画已运行过半，你改了 easing，只会从当前时刻起按新缓动计算后续帧，前面那段不受影响。
立即学习“前端免费学习笔记（深入）”；
- 想让整个动画按新缓动重跑：必须
anim.cancel()→anim.effect.updateTiming({ easing: "ease-out" })→anim.play() -
easing值必须合法：写"ease-in-ou"（少个 t）或cubic-bezier(0.1, 0.9, 1.2, 0.3)（超出 0–1）会被忽略，回退到默认"ease" - 不支持
steps()类型的 easing ——updateTiming()传入steps(3)会导致整个 timing 更新失败（Chrome 报 warning，Firefox 可能 throw）
updateTiming() 在循环动画中频繁调用有什么风险
每次调用都会强制合成线程重新规划帧调度，尤其当 iterations 被改写时（比如从 Infinity 改成 5），浏览器要重算结束时机和循环边界，开销比单纯改 currentTime 高得多。
- 循环动画中优先用
anim.currentTime微调位置，或用anim.playbackRate控制快慢，比反复updateTiming()更轻量 - 如果真要动态改循环次数，确保新值是整数或
Infinity；传NaN或字符串如"3"会静默失败 - 旧版 Safari 对
updateTiming()的并发调用支持不稳定，建议加锁或节流（requestAnimationFrame内最多调一次）
真正难的是 timing 和 playbackRate 的协同控制——改了 duration 还想保持当前视觉节奏，就得同步调整 currentTime 和 playbackRate，稍有偏差就会出现“抽帧”或“拖影”。别信“设完就生效”，Web Animations 的每一处更新都有隐式前提。
