JavaScript中Web Animations API控制CSS动画

在前端动画领域，绕开复杂第三方库、直接操作浏览器原生能力，一直是许多开发者追求的目标。Web Animations API 正是这样一套原生的 JavaScript 接口，让你能直接用代码创建、控制和管理 CSS 动画与关键帧动画，无需额外依赖，操控起来也比单纯切换 CSS class 或调整 animation-play-state 属性灵活得多。

这套 API 的核心入口，是每个 DOM 元素上都有的 animate() 方法。调用它会返回一个 Animation 对象，拿到这个对象，就等于获得了对动画的精细遥控器。

用 element.animate() 启动动画

这是最常用的方式，直接在元素上播放一个动画，并返回一个 Animation 对象供后续控制。它的参数很直观：

• 第一个参数是关键帧对象数组（或对象形式的属性映射），类似于 CSS @keyframes 的 JavaScript 版本，例如 [{ opacity: 0 }, { opacity: 1 }]
• 第二个参数是动画选项，比如 duration（毫秒）、easing（缓动函数）、iterations（重复次数）、direction 等
• 它不需要提前定义 CSS 类或 @keyframes，特别适合动态生成动画效果的场景

举一个简单例子：

const anim = box.animate(
  [{ transform: 'scale(1)', opacity: 0.5 },
   { transform: 'scale(1.2)', opacity: 1 }],
  { duration: 300, easing: 'ease-in-out' }
);

暂停、恢复、反向和取消动画

拿到 Animation 实例后，可以随时干预它的播放状态，想让它停就停，想让它接着跑就接着跑：

• anim.pause()：暂停动画，再次调用 anim.play() 会从暂停处继续
• anim.reverse()：将当前播放方向取反（正向变反向，反向变正向），并立即生效
• anim.cancel()：彻底终止动画，元素回到动画开始前的状态（注意：不是结束状态）
• anim.finish()：跳转到动画最后一帧，并触发 finish 事件

监听动画生命周期事件

通过 onfinish、oncancel 和 onremove 属性，或者直接用 addEventListener，就能监听到动画的关键节点：

• finish：动画自然结束（完成所有 iteration）或被 finish() 主动触发时触发
• cancel：调用 cancel() 后触发，常用于清理资源
• remove：动画被自动移除（比如元素从 DOM 中删除）时触发

实际使用中，这种事件监听非常实用：

anim.onfinish = () => console.log('动画结束了');
anim.addEventListener('cancel', () => {
  // 执行清理逻辑
});

与 CSS 动画共存与协调

Web Animations API 可以和已定义的 CSS 动画共存，不过需要注意优先级规则：

• JavaScript 创建的动画（通过 element.animate()）默认拥有更高优先级，会覆盖同名 CSS 动画属性（比如 transform、opacity）
• 可以通过 anim.effect.getComputedTiming().progress 获取当前动画进度（取值范围 0～1）
• 如果想让 JS 动画“接续”一个正在运行的 CSS 动画，可以用 getAnimations() 获取已有动画，再基于其当前状态构造新动画

需要获取元素上当前所有动画时，直接调用 element.getAnimations() 即可，它返回一个 Animation[] 数组，方便统一管理或协调多个动画效果。