HTML5的Web Animations API怎么用？如何实现复杂动画？

web animations api（waapi）是一种结合css动画性能优势与javascript编程灵活性的浏览器原生动画解决方案。1. 它通过element.animate()方法实现动画，接受关键帧和选项参数，返回可控制动画播放、暂停、反转等的animation对象；2. 支持动画序列、并行动画和组合动画，利用promise机制实现动画间的时序控制；3. 相较于css动画，waapi提供更强的运行时控制能力，适用于需要动态调整的复杂ui动画；4. 与requestanimationframe相比，waapi在合成器线程执行，性能更优且代码更简洁；5. 性能优化方面，应优先动画transform和opacity属性，避免昂贵的布局变化；6. 兼容性方面，可通过引入web-animations-js polyfill支持旧浏览器，并进行特性检测实现优雅降级。

Web Animations API (WAAPI) 是一个相当强大的工具，它让我个人在处理前端动画时，有了更深层次的控制感。坦白讲，它就像是把CSS动画的性能优势和JavaScript的编程灵活性结合在了一起，让你能在浏览器的主线程之外，更高效地驱动复杂动画。你可以把它看作是浏览器原生提供的一套动画引擎接口，直接通过JavaScript来操作，免去了很多requestAnimationFrame手动计算的繁琐，同时又能获得接近CSS动画的流畅度。对我来说，它不仅仅是一个API，更是一种思维方式的转变，让我能更优雅地构建动态用户体验。

解决方案

使用HTML5的Web Animations API实现动画，核心在于element.animate()方法。这个方法返回一个Animation对象，你可以通过它来控制动画的播放、暂停、反转等。

element.animate()方法接受两个参数：

立即学习“前端免费学习笔记（深入）”；

1. keyframes：定义动画的关键帧。可以是一个对象数组（每个对象代表一个关键帧的状态），也可以是一个包含属性-值对的对象（表示从当前状态到目标状态的动画）。
2. options：一个对象，定义动画的持续时间、缓动函数、填充模式、迭代次数等。

基本用法示例：

const box = document.getElementById('myBox');

// 定义关键帧：从透明度0到1，从左边0px到200px
const keyframes = [
  { opacity: 0, transform: 'translateX(0px)' },
  { opacity: 1, transform: 'translateX(200px)' }
];

// 定义动画选项：持续时间2秒，缓动函数ease-in-out，向前填充，无限循环
const options = {
  duration: 2000, // 2000毫秒
  easing: 'ease-in-out',
  fill: 'forwards', // 动画结束后保持最终状态
  iterations: Infinity // 无限循环
};

// 播放动画
const animation = box.animate(keyframes, options);

// 你可以通过返回的animation对象进行控制
// animation.pause(); // 暂停动画
// animation.play();  // 继续播放
// animation.reverse(); // 反转动画
// animation.cancel(); // 取消动画并回到初始状态
// animation.finish(); // 快速跳到动画结束状态

更灵活的关键帧定义： 你也可以只定义起始和结束状态，WAAPI会自动插值：

const box = document.getElementById('myBox');

box.animate(
  {
    transform: ['translateX(0px)', 'translateX(300px)'], // 从0到300px
    backgroundColor: ['red', 'blue'] // 从红色到蓝色
  },
  {
    duration: 1500,
    easing: 'linear',
    iterations: 1,
    fill: 'forwards'
  }
);

这里，transform和backgroundColor数组的第一个元素是起始值，第二个是结束值。WAAPI会根据这些值自动生成关键帧。

理解Animation对象：animate()方法返回的Animation对象，是WAAPI的核心。它有一个finished Promise，当动画完成时会resolve。这对于串联动画或在动画结束后执行某些操作非常有用。

animation.finished.then(() => {
  console.log('动画已完成！');
  // 可以在这里触发下一个动画或执行其他逻辑
});

如何在WAAPI中管理多个动画或实现动画序列？

管理多个动画或实现复杂动画序列，是WAAPI真正发挥其威力的地方。我个人觉得，WAAPI的异步特性和Promise机制，让这事变得既灵活又富有逻辑。

1. 动画序列（Sequential Animations）： 实现动画序列最常见也最可靠的方式，就是利用Animation.finished这个Promise。当一个动画完成后，其finished Promise会resolve，你就可以在这个then回调中启动下一个动画。

const elem1 = document.getElementById('elem1');
const elem2 = document.getElementById('elem2');
const elem3 = document.getElementById('elem3');

// 动画1：elem1移动
const anim1 = elem1.animate(
  { transform: ['translateX(0)', 'translateX(100px)'] },
  { duration: 1000, fill: 'forwards' }
);

// 动画2：在动画1完成后，elem2移动
anim1.finished.then(() => {
  console.log('elem1 动画完成，启动 elem2 动画');
  const anim2 = elem2.animate(
    { opacity: [0, 1] },
    { duration: 800, fill: 'forwards' }
  );

  // 动画3：在动画2完成后，elem3旋转
  anim2.finished.then(() => {
    console.log('elem2 动画完成，启动 elem3 动画');
    elem3.animate(
      { transform: ['rotate(0deg)', 'rotate(360deg)'] },
      { duration: 1200, fill: 'forwards' }
    );
  });
});

这种链式调用非常清晰，能确保动画按顺序执行。

另一种简单的序列化方式是利用delay属性。如果动画的起始状态是上一个动画的结束状态，你可以直接设置一个延迟来启动下一个动画，但这种方式不如Promise精确，尤其是在动画时长不确定的情况下。

2. 并行动画（Parallel Animations）： 并行动画就简单多了，你只需要同时调用多个元素的animate()方法即可。如果需要知道所有并行动画何时完成，可以使用Promise.all()。

const item1 = document.getElementById('item1');
const item2 = document.getElementById('item2');
const item3 = document.getElementById('item3');

const anims = [
  item1.animate({ transform: ['scale(1)', 'scale(1.2)'] }, { duration: 500, fill: 'forwards' }),
  item2.animate({ opacity: [0, 1] }, { duration: 700, fill: 'forwards' }),
  item3.animate({ backgroundColor: ['#eee', 'lightblue'] }, { duration: 600, fill: 'forwards' })
];

Promise.all(anims.map(a => a.finished)).then(() => {
  console.log('所有并行动画都完成了！');
  // 可以进行下一步操作，比如隐藏加载指示器
});

这种方式对于同时发生但又各自独立的UI元素动画非常实用。我常常用它来做页面加载时的元素逐个淡入或同时出现的动画。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

0

查看详情

3. 组合动画（Complex Compositions）： 有时候，你需要一个元素同时执行多个动画，比如边移动边旋转。WAAPI允许你对同一个元素多次调用animate()，每个调用都会创建一个独立的Animation实例。这些动画会同时作用于元素，但如果它们修改了相同的CSS属性，那么最后调用的那个动画可能会覆盖前面的，或者WAAPI会根据复合规则（Composite Operation）进行合并。

const complexBox = document.getElementById('complexBox');

// 动画1：移动
complexBox.animate(
  { transform: ['translateX(0px)', 'translateX(200px)'] },
  { duration: 2000, easing: 'ease-in-out', fill: 'forwards' }
);

// 动画2：旋转 (与移动同时进行)
complexBox.animate(
  { transform: ['rotate(0deg)', 'rotate(360deg)'] },
  { duration: 2000, easing: 'linear', fill: 'forwards' }
);

// 动画3：颜色变化 (与移动和旋转同时进行)
complexBox.animate(
  { backgroundColor: ['red', 'blue'] },
  { duration: 2000, easing: 'ease-in-out', fill: 'forwards' }
);

这里需要注意的是，如果多个动画都修改了transform属性，WAAPI会尝试合并它们。例如，一个translateX和一个rotate通常会正确合并。但如果都是translateX，则行为取决于具体的实现，通常是后者的效果会叠加或覆盖前者。理解这些复合规则，能让你更好地设计复杂动画。

WAAPI与CSS动画、JavaScript动画（requestAnimationFrame）相比，优势和适用场景是什么？

这真的是一个老生常谈但又不得不深思的问题。在我看来，它们三者各有千秋，并不是谁取代谁的关系，更多的是互补。选择哪一个，很大程度上取决于你动画的需求、复杂度和性能目标。

1. CSS动画（@keyframes 和 transition）：

• 优势：
  • 性能卓越： 浏览器通常会把CSS动画放到独立的合成器线程上执行，避免了主线程的阻塞，所以动画非常流畅，即使主线程繁忙。
  • 声明式： 语法简洁，易于上手，特别适合简单的、预设的、不需运行时动态控制的动画。
  • 浏览器优化： 浏览器对CSS动画有大量优化，例如自动进行硬件加速。
• 劣势：
  • 控制力弱： 运行时很难暂停、反转、跳转到特定帧，或者根据用户输入动态改变动画行为。
  • 复杂序列难： 难以实现复杂的动画序列或依赖关系，通常需要结合JavaScript来监听animationend等事件。
  • 状态管理： 动画结束后元素状态的保持（forwards）有时不够灵活。
• 适用场景：
  • 简单的UI过渡效果，比如按钮hover、菜单展开/收起。
  • 页面加载时的固定动画，例如logo淡入、元素滑入。
  • 对性能要求极高，但无需复杂交互的动画。

2. JavaScript动画（requestAnimationFrame）：

• 优势：
  • 极致控制： 逐帧控制动画的每一个细节，可以实现任何你能想象到的动画效果，包括物理引擎、路径动画、复杂的数据可视化动画等。
  • 动态性强： 可以完全根据用户输入、数据变化等实时调整动画。
  • 无限制： 不受CSS属性的限制，可以动画任何JS能操作的数值。
• 劣势：
  • 性能挑战： 动画逻辑在主线程执行，如果计算量大或DOM操作频繁，容易导致掉帧（jank）。需要开发者手动优化，确保每一帧的计算和渲染都在16ms内完成。
  • 代码量大： 需要手动管理动画状态、时间、插值计算等，代码量相对较大，也更容易出错。
  • 学习曲线： 对初学者来说，理解requestAnimationFrame的原理和实现流畅动画需要一定的经验。
• 适用场景：
  • 游戏开发、复杂的数据可视化（如D3.js）。
  • 需要物理模拟、弹性效果等高度自定义和交互的动画。
  • 动画效果与业务逻辑深度耦合，需要实时数据反馈的场景。

3. Web Animations API (WAAPI)：

• 优势：
  • 性能与控制的平衡： 像CSS动画一样，WAAPI动画也可以在合成器线程上运行（尤其对于transform和opacity等属性），保证流畅性。同时，它提供了JS的编程接口，可以动态控制动画（播放、暂停、反转、跳转、速度调节等）。
  • 语义化： Animation对象提供了清晰的API，比手动管理requestAnimationFrame的状态更直观。
  • 事件与Promise： finished Promise和onfinish、oncancel等事件，让动画序列和并发管理变得简单高效。
  • 桥梁作用： 弥补了CSS动画控制不足和JS动画性能优化的复杂性之间的鸿沟。
• 劣势：
  • 浏览器兼容性： 虽然主流浏览器支持度已经很高，但在一些旧版浏览器中可能需要Polyfill。
  • 复杂插值： 对于非线性或自定义的缓动函数，WAAPI直接支持不如一些第三方库（如GSAP）那么强大，通常只能使用预定义的字符串。
  • 调试： 相比CSS动画，WAAPI的调试工具集成度可能不如直接在开发者工具中修改CSS属性那么直观。
• 适用场景：
  • 需要动态控制的UI动画，例如：可暂停的进度条、可反转的侧边栏菜单。
  • 复杂的页面过渡效果，需要精确控制动画的开始和结束时机。
  • 交互式组件的动画，例如拖拽、滑动等，动画需要响应用户操作。
  • 当你希望获得CSS动画的性能，又需要JavaScript的强大控制力时，WAAPI是理想的选择。

总结一下，如果动画简单且静态，用CSS；如果需要极致的自定义和运行时控制，且不惧性能优化挑战，用requestAnimationFrame；而如果希望在性能和控制之间找到一个最佳平衡点，实现复杂的、可编程的UI动画，WAAPI无疑是首选。我个人在项目里，现在会优先考虑WAAPI，因为它真的能让我写出更优雅、更可维护的动画代码。

如何处理WAAPI动画的性能优化和兼容性问题？

即便WAAPI本身在性能上有很多优势，但在实际应用中，性能优化和兼容性依然是我们需要重点关注的方面。毕竟，用户体验是王道。

1. 性能优化： WAAPI的动画通常由浏览器优化，很多时候甚至能推到合成器线程执行，但这不意味着你可以肆无忌惮地滥用。

• 关注可合成属性（Compositable Properties）： 最重要的优化点是尽可能动画那些不会触发布局（layout）或绘制（paint）的CSS属性。主要就是transform（包括translate、scale、rotate、skew）和opacity。这些属性的改变不会影响其他元素的布局，浏览器可以直接在GPU上进行合成，效率最高。
• 避免昂贵的属性： 尽量避免动画width、height、top、left（除非是绝对定位且不影响流）、box-shadow等属性，它们可能导致布局重排或重绘，影响性能。如果必须动画这些属性，考虑用transform来模拟，例如用scale代替width/height的变化。
• 减少动画元素数量： 尽管WAAPI效率高，但同时动画大量元素（例如几百个）仍然会带来性能压力。如果可能，尝试减少同时动画的元素数量，或者采用分批动画的策略。
• 利用fill属性： fill: 'forwards'可以确保动画结束后元素保持最终状态，避免动画结束后元素跳回初始状态，从而减少不必要的重新计算和重绘。
• 合理使用iterations和delay： 无限循环的动画要考虑是否真的有必要，过多的循环动画会持续消耗资源。合理设置delay可以错开动画的起始时间，避免所有动画同时开始造成的瞬间性能峰值。

2. 兼容性问题： WAAPI的浏览器支持度正在变得越来越好，但仍然不是100%，尤其是在一些老旧的浏览器或特定环境下。

• 检查浏览器支持： 在项目开始前，最好查阅 caniuse.com 来了解当前WAAPI的全球支持情况。目前主流桌面和移动浏览器（Chrome, Firefox, Safari, Edge）对WAAPI的核心功能支持都比较完善。
• 使用Polyfill： 对于不支持WAAPI或支持不完全的浏览器，最常见的解决方案是引入Polyfill。官方推荐的Polyfill是 web-animations-js。你可以通过npm安装：

  npm install web-animations-js

  登录后复制

  然后在你的JavaScript文件中引入：

  // 在你的应用入口文件或动画逻辑文件顶部引入
  import 'web-animations-js';
  // 或者对于CDN/script标签方式：
  // <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations.min.js"></script>

  登录后复制

  引入Polyfill后，即使在不支持WAAPI的浏览器中，element.animate()方法也能正常工作，尽管性能可能不如原生实现。

• 特性检测和优雅降级： 即使使用了Polyfill，也建议进行特性检测。这样可以在原生支持WAAPI的浏览器中使用原生API，避免加载不必要的Polyfill代码。

  if (!Element.prototype.animate) {
    // 引入 Polyfill
    import('web-animations-js').then(() => {
      console.log('Web Animations API Polyfill loaded.');
    }).catch(err => {
      console.error('Failed to load Web Animations API Polyfill:', err);
    });
    // 或者提供一个简单的CSS动画作为降级方案
    // element.classList.add('fallback-animation-class');
  }

  登录后复制

  对于一些非关键的动画，你也可以考虑不使用Polyfill，而是提供一个CSS动画作为备选方案，或者干脆不显示动画，实现优雅降级。

• 测试不同浏览器： 永远不要只在一个浏览器上测试你的动画。在不同浏览器、不同设备（尤其是移动设备）上进行测试，可以帮助你发现潜在的兼容性问题和性能瓶颈。

处理好这些，你的WAAPI动画就能在大多数用户设备上跑得又快又稳，提供一致且流畅的用户体验。

以上就是HTML5的Web Animations API怎么用？如何实现复杂动画？的详细内容，更多请关注php中文网其它相关文章！