如何用Web Animations API创建复杂的交互动画？-js教程-PHP中文网

如何用Web Animations API创建复杂的交互动画？

夜晨

发布： 2025-09-30 20:04:01

原创

625人浏览过

Web Animations API 通过 JavaScript 提供精确动画控制，支持播放、暂停、反向及动态调整。其核心由关键帧和动画选项构成，animate() 方法返回动画实例，可结合事件与 Promise 实现复杂交互动画，如序列执行与鼠标响应。

如何用web animations api创建复杂的交互动画？

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();
  }
});

登录后复制

组合多个动画与时间线控制

复杂交互动画往往需要多个元素协同运动。可以通过为不同元素创建独立动画，并统一管理其播放状态来实现同步效果。

Swapface人脸交换

一款创建逼真人脸交换的AI换脸工具

查看详情

也可以使用 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 的合理使用。

以上就是如何用Web Animations API创建复杂的交互动画？的详细内容，更多请关注php中文网其它相关文章！