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 的合理使用。
以上就是如何用Web Animations API创建复杂的交互动画？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1524992.html
微信扫一扫 
支付宝扫一扫 
