用途:WAAPI 适配器用于在 FrameVideo 中编写基于浏览器原生 Web Animations API 的动画,适合零依赖动画、轻量 DOM 运动(transform 与 opacity)、原生浏览器性能、由结构化数据生成的动画,以及追求极小打包体积的场景。
主要能力与用法:使用 element.animate() 创建具有有限 duration 和 iterations 的动画,并设置 fill: "both" 以保持定位后的状态;创建后调用 animation.pause() 暂停。适配器会调用 document.getAnimations(),将每个动画的 currentTime 设为 FrameVideo 时间(毫秒)后暂停。可通过内联 script 并配合 data-start、data-duration、data-track-index 等元素属性使用,例如 orb.animate([...], { duration: 3000, delay: 2000, easing: "cubic-bezier(0.2, 0, 0, 1)", fill: "both", iterations: 1 }) 后 animation.pause()。也支持 stagger 模式:对 querySelectorAll(".token") 遍历,以 index * 80 作为 delay。
适用场景:CSS 关键帧过于僵硬而 GSAP 又非必需时的轻量 DOM 运动;从结构化数据生成动画;可用关键帧、延迟与偏移表达的简单时间轴。
限制:不要用于复杂时间轴编排(用 gsap)、纯 CSS 装饰(用 css-animations)、3D/WebGL(用 three)或设计师导出(用 lottie)。避免无限迭代、依赖 animation.finished 修改渲染关键 DOM、用 requestAnimationFrame/timers/performance.now() 运行独立时钟、在可用 transform/opacity 时动画布局属性;注意 clip 局部起始时间不是自动的,需用 delay 建模偏移或让元素可见性由 FrameVideo 时序控制。编辑后可用 npx framevideo lint、npx framevideo validate、npx framevideo preview 校验。