Web Animations API 组合动画与状态驱动实践

Web Animations API 组合动画与状态驱动实践概述通过 `Element.animate` 与时间线控制实现复杂动画组合，结合状态机管理动画生命周期与互斥关系。技术背景原生 API，性能与控制力优于部分 CSS 动画场景，支持 `play/pause/reverse/cancel`。核心内容基本用法const el = document.querySelector('.card');

const anim = el.animate(

[{ transform: 'translateY(20px)', opacity: 0 }, { transform: 'translateY(0)', opacity: 1 }],

{ duration: 300, easing: 'ease', fill: 'both' }

);

anim.onfinish = () => console.log('done');

状态驱动组合const machine = { state: 'idle' };

function enter() {

if (machine.state !== 'idle') return;

machine.state = 'entering';

el.animate([...], { duration: 300 }).onfinish = () => (machine.state = 'entered');

}

function leave() {

if (machine.state !== 'entered') return;

machine.state = 'leaving';

el.animate([...], { duration: 300 }).onfinish = () => (machine.state = 'idle');

}

技术参数与验证测试环境浏览器: Chrome/Edge/Firefox/Safari 17+验证要点在低端设备与高负载下帧率与回调稳定性；与 CSS 动画对比性能。应用场景组件入场/离场、列表过渡、复杂交互编排。注意事项注意动画互斥与取消，避免竞态导致状态错乱。与 `prefers-reduced-motion` 协同提供降级或禁用动画。参考资料MDN Web Animations API：https://developer.mozilla.org/docs/Web/API/Web_Animations_API