一、什么是Web Animations API？
Web Animations API（简称WAAPI）是浏览器提供的一套用于驱动Web动画的JavaScript接口。它将CSS动画的性能优势与JavaScript的动态控制能力完美结合。通过WAAPI，我们不再需要依赖复杂的CSS @keyframes，也不必使用性能较差的setTimeout或requestAnimationFrame来手动计算动画帧，而是可以直接用JS代码高效地创建、控制和组合动画。
二、基础用法：如何创建一个动画？
WAAPI的核心方法是元素上的 animate() 方法。它接受两个参数：关键帧数组和时间轴配置选项。
const element = document.querySelector('.box');
element.animate([
{ transform: 'translateX(0px)', opacity: 0.5 },
{ transform: 'translateX(300px)', opacity: 1 }
], {
duration: 1000, // 动画时长，单位毫秒
iterations: Infinity, // 循环次数，Infinity为无限循环
easing: 'ease-in-out' // 缓动函数
});上述代码实现了一个方块向右移动并逐渐变清晰的效果。关键帧的写法与CSS的 @keyframes 非常相似，但使用了JS对象的形式，更加灵活。
三、动画控制：像视频一样操控动画
与CSS动画最大的不同，WAAPI提供了强大的控制能力。animate() 方法会返回一个 Animation 对象，通过这个对象我们可以对动画进行播放、暂停、反向、调速等操作。
const animation = element.animate(...); animation.pause(); // 暂停动画 animation.play(); // 播放动画 animation.reverse(); // 反向播放动画 animation.cancel(); // 取消动画，恢复初始状态 animation.finish(); // 直接跳到动画结束状态 animation.playbackRate = 2; // 2倍速播放
四、如何实现复杂动画？
在实际开发中，我们经常需要处理动画的串联、并联以及动态修改。WAAPI结合Promise，能够优雅地解决这些复杂场景。
1. 动画链（串行动画）
通过 Animation 对象的 finished 属性（它是一个Promise），我们可以轻松实现动画执行完毕后再执行下一个动画的逻辑。
const anim1 = element.animate([
{ transform: 'scale(1)' },
{ transform: 'scale(1.5)' }
], { duration: 500, fill: 'forwards' });
anim1.finished.then(() => {
// anim1执行完毕后，开始执行anim2
element.animate([
{ transform: 'scale(1.5)', opacity: 1 },
{ transform: 'scale(1.5)', opacity: 0 }
], { duration: 300, fill: 'forwards' });
});2. 并行动画与同步
如果需要多个动画同时进行，并在所有动画都结束后执行某些逻辑，可以使用 Promise.all。
const animA = boxA.animate([...], { duration: 1000 });
const animB = boxB.animate([...], { duration: 1500 });
Promise.all([animA.finished, animB.finished]).then(() => {
console.log('所有并行动画执行完毕');
});3. 动态修改动画效果
WAAPI允许在动画运行时动态修改其时间轴和关键帧效果，这是CSS动画难以做到的。
// 直接跳到动画的500毫秒处
animation.currentTime = 500;
// 动态修改动画的持续时间
animation.effect.updateTiming({ duration: 2000 });五、实战案例：复杂交互动画序列
下面是一个完整的HTML结构示例，演示了一个加载动画完成后淡出，随后内容区域淡入的复杂交互序列。你可以将此代码复制到编辑器中查看效果，或者访问在线演示地址：www.ipipp.com。
<div id="loader" style="width:50px;height:50px;background:blue;"></div>
<div id="content" style="opacity:0;transform:translateY(20px);">内容加载完成！</div>
<script>
const loader = document.getElementById('loader');
const content = document.getElementById('content');
// 1. 旋转加载动画
const spinAnim = loader.animate([
{ transform: 'rotate(0deg)' },
{ transform: 'rotate(360deg)' }
], { duration: 800, iterations: 3, easing: 'linear' });
// 2. 加载动画结束后，执行淡出和内容淡入
spinAnim.finished.then(() => {
const fadeOut = loader.animate([
{ opacity: 1 },
{ opacity: 0 }
], { duration: 300, fill: 'forwards' });
content.animate([
{ opacity: 0, transform: 'translateY(20px)' },
{ opacity: 1, transform: 'translateY(0)' }
], { duration: 500, fill: 'forwards', easing: 'ease-out' });
return fadeOut.finished;
}).then(() => {
loader.style.display = 'none'; // 彻底移除加载元素
});
</script>六、总结
Web Animations API 为前端开发者提供了一套现代化、高性能的动画解决方案。它不仅拥有媲美CSS动画的渲染性能，还赋予了JavaScript对动画生命周期的绝对控制权。通过 animate()、finished、playbackRate 等核心API，我们能够以极低的代码复杂度实现过去需要借助第三方库（如GSAP）才能完成的复杂动画逻辑。在现代浏览器中，WAAPI已经成为实现复杂交互动画的首选方案。