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()方法接受两个参数：
立即学习“前端免费学习笔记（深入）”；
基本用法示例：
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的异步特性和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元素动画非常实用。我常常用它来做页面加载时的元素逐个淡入或同时出现的动画。
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，则行为取决于具体的实现，通常是后者的效果会叠加或覆盖前者。理解这些复合规则，能让你更好地设计复杂动画。
这真的是一个老生常谈但又不得不深思的问题。在我看来，它们三者各有千秋，并不是谁取代谁的关系，更多的是互补。选择哪一个，很大程度上取决于你动画的需求、复杂度和性能目标。
1. CSS动画（@keyframes 和 transition）：
2. JavaScript动画（requestAnimationFrame）：
3. Web Animations API (WAAPI)：
总结一下，如果动画简单且静态，用CSS；如果需要极致的自定义和运行时控制，且不惧性能优化挑战，用requestAnimationFrame；而如果希望在性能和控制之间找到一个最佳平衡点，实现复杂的、可编程的UI动画，WAAPI无疑是首选。我个人在项目里，现在会优先考虑WAAPI，因为它真的能让我写出更优雅、更可维护的动画代码。
即便WAAPI本身在性能上有很多优势，但在实际应用中，性能优化和兼容性依然是我们需要重点关注的方面。毕竟，用户体验是王道。
1. 性能优化： WAAPI的动画通常由浏览器优化，很多时候甚至能推到合成器线程执行，但这不意味着你可以肆无忌惮地滥用。
2. 兼容性问题： WAAPI的浏览器支持度正在变得越来越好，但仍然不是100%，尤其是在一些老旧的浏览器或特定环境下。
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()方法也能正常工作，尽管性能可能不如原生实现。
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中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
132
