Web Animations API 通过 JavaScript 提供精确动画控制，支持播放、暂停、反向及动态调整。其核心由关键帧和动画选项构成，animate() 方法返回动画实例，可结合事件与 Promise 实现复杂交互动画，如序列执行与鼠标响应。
Web Animations API 提供了一种直接通过 JavaScript 控制动画的强大方式，相比 CSS 动画更灵活，适合创建复杂的交互动画。它结合了性能优势和编程控制能力，能实现精准的动画时序、暂停、反向播放和动态调整。
理解 Web Animations API 的基本结构
每个动画由两个核心部分组成：关键帧（Keyframes）和动画选项（timing options）。
关键帧定义动画各个阶段的样式状态，写法类似于 CSS 的 @keyframes。动画选项则控制持续时间、缓动函数、延迟、重复次数等。
const element = document.querySelector('.box');
element.animate([
{ transform: 'translateX(0px)', opacity: 1 },
{ transform: 'translateX(100px)', opacity: 0.5 },
{ transform: 'translateX(200px)', opacity: 0 }
], {
duration: 1000,
easing: 'ease-in-out',
iterations: 1
});
这段代码让元素在 1 秒内平移并淡出。animate() 方法返回一个 Animation 对象，可用于后续控制。
实现交互控制：播放、暂停与反向
利用 animate() 返回的动画实例，可以实时响应用户操作。
常见控制方法包括：- play()：开始或继续播放动画
- pause()：暂停当前动画
- reverse()：倒放动画
- currentTime：获取或设置当前播放时间（毫秒）
- playbackRate：调整播放速度（如 2.0 表示两倍速）
例如，点击按钮暂停动画：
const animation = element.animate([...], { duration: 2000 });
button.addEventListener('click', () => {
if (animation.playState === 'running') {
animation.pause();
} else {
animation.play();
}
});
组合多个动画与时间线控制
复杂交互动画往往需要多个元素协同运动。可以通过为不同元素创建独立动画，并统一管理其播放状态来实现同步效果。
也可以使用 AnimationTimeline（目前主要支持 DocumentTimeline）进行更精细的时间编排。
例如，实现序列动画：const anim1 = elem1.animate({...}, { duration: 500 });
const anim2 = elem2.animate({...}, { duration: 500, delay: 500 });
// 元素2在元素1结束后开始
anim1.finished.then(() => anim2.play());
或者使用 Promise 链式调用实现更复杂的流程：
async function runSequence() {
await anim1.finished;
await anim2.play().finished;
await fadeOutElem3.play().finished;
}
动态修改动画参数与响应状态变化
动画运行过程中可以动态调整关键帧或时间参数。
例如，根据鼠标位置改变位移动画的目标：const anim = element.animate([
{ transform: `translateX(0)` },
{ transform: `translateX(${mouseX}px)` }
], { duration: 800 });
// 用户移动鼠标时更新目标位置
document.addEventListener('mousemove', (e) => {
const newKeyframes = [
{ transform: `translateX(${element.offsetLeft}px)` },
{ transform: `translateX(${e.clientX}px)` }
];
anim.effect.setKeyframes(newKeyframes);
anim.play(); // 重新播放
});
同时可监听动画状态变化：
anim.onfinish = () => console.log('动画完成');
anim.oncancel = () => console.log('动画被取消');
基本上就这些。掌握 Web Animations API 的关键是理解其基于对象的控制模型，结合事件响应和异步流程管理，就能构建出高度交互、流畅自然的动画体验。不复杂但容易忽略的是对 playState 状态的判断和 finished Promise 的合理使用。
