"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