animation worklet不是css动画替代品，而是将动画逻辑移至独立线程运行的底层执行环境，用于实现高帧率、响应式、数据驱动动画；它不操作dom，仅通过effect.setkeyframes()更新transform/opacity等可合成属性。
Animation Worklet 是什么，它真能替代 CSS 动画？
不能。Animation Worklet 不是“更酷的 CSS 动画”，而是浏览器提供的底层动画执行环境——它让动画逻辑运行在独立线程（Worklet 线程），避开主线程卡顿，适合做高帧率、响应式、数据驱动的动画（比如滚动视差、手势拖拽反馈、音频可视化）。它不替代 transform 或 @keyframes，而是接管「何时更新哪些属性」的决策权。
常见误判：以为引入 registerAnimator 就能直接动起来。实际必须配合 document.timeline + new Animation() + 启用 layoutWorklet / paintWorklet 的同级前提（虽然 Animation Worklet 本身不依赖它们）。
如何注册并加载 Animator 类？注意 MIME 类型和跨域限制
Animation Worklet 脚本必须通过 worklet.addModule() 加载，且服务端需返回 application/javascript MIME 类型。本地 file:// 协议直接报 DOMException: Failed to execute 'addModule' on 'Worklet' —— 这是最常卡住的一步。
- 必须用本地服务器（如
npx serve、python3 -m http.server）启动页面 - Animator 文件（如
scroll-animator.js）不能有 ES6 模块循环引用，也不能调用console.log、alert等主线程 API - 注册时类名必须与
registerAnimator()第一个参数完全一致：registerAnimator('my-scroller', class MyScroller extends Animator { ... }) - 类中必须实现
animate()方法，且只能操作传入的currentTime和effect（即KeyframeEffect实例）
怎么把 Animator 绑定到真实 DOM 元素？关键在 effect 的 target 和 keyframes
Animation Worklet 本身不选元素、不设样式，只负责计算每帧的属性值。真正驱动 DOM 更新的是你创建的 Animation 实例所关联的 KeyframeEffect —— 它的 target 必须是有效 DOM 元素，keyframes 必须至少含一个可动画属性（如 transform），且该属性需在 animate() 中显式写入。
例如，想控制 div#box 的 translateX：
const effect = new KeyframeEffect(
document.querySelector('#box'),
[{ transform: 'translateX(0px)' }, { transform: 'translateX(100px)' }],
{ duration: 1000, fill: 'forwards' }
);
const anim = new Animation(effect, document.timeline);
anim.animator = 'my-scroller'; // ← 这里指定注册名
anim.play();
若 effect.target 为 null 或 keyframes 缺失 transform 字段，animate() 中对 effect.setKeyframes() 的调用会静默失败，动画不动也不报错。
为什么 animate() 里改不了 opacity？哪些 CSS 属性能被 Worklet 修改？
Animation Worklet 只能修改**可合成属性（compositable properties）**，且必须通过 effect.setKeyframes() 整体重置，不能像 JS 那样直接 el.style.opacity = 0.5。目前支持的属性非常有限：transform、opacity、filter（部分函数）、backdrop-filter（Chrome 115+）。其他如 width、color、margin 会直接忽略。
-
opacity可用，但 keyframes 必须初始定义：[{ opacity: 1 }, { opacity: 0 }]，否则setKeyframes()传入新数组时若缺少字段，浏览器可能 fallback 到默认值 -
transform推荐用矩阵或translateX()等函数形式，避免混用px和%单位导致解析异常 - 每次
animate()调用都应调用effect.setKeyframes()，哪怕只改一个值——不调用就不会更新
真正难调试的点在于：没有 DevTools 面板专门显示 Worklet 动画帧，console.log 在 Worklet 里无效，只能靠 performance.now() 打点 + 主线程轮询 getComputedStyles 做间接验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
