携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 22 天，点击查看活动详情
最近翻 MDN 突然发现一套叫 Web Animations API 的东东，点进去看才知道，原来是一套控制 css animation 的 API，而且已经有段时间了 🤦♂️，而我居然一直不知道。
介绍
Web Animations API 主要包含两个 API：animate 来执行动画，getAnimations 来获取当前元素的动画。
并且 getAnimations 不止可以获取到 animate 创建的动画，css 中的动画同样可以获取到。
getAnimations
先来个小 Demo：
如上 Demo 所示，通过 getAnimations 我们可以获取到当前元素的正在运行的动画的 Animate 对象，如果传入参数 {subtree: true} 还能获取到包括其所有子元素、伪元素的动画。
通过拿到的 animate，我们可以直接对其进行各种操作，如：
pause- 暂停动画play- 播放动画cancel- 取消动画状态reverse- 反向执行动画到开始状态finish- 直接跳到动画结束阶段
此外还有一些其他比较少用的方法，如 commitStyles、persist 等。
通过上述 API，我们可以轻易的通过 JS 来控制动画的执行，而不需要像以前一样通过改写 CSS 样式来控制。
除了上述的一些操作方法外，animate 中还有很多动画的属性，包括运行状态的 Promise、timeline、effect 等。
其中如 finished 等 Promise 在动画控制时也很好用，比如创建一个动画后需要在动画完成后做一些处理直接 await finished 即可，不需要像以前一样监听 dom 状态或是设定倒计时。
其它需要了解的可以点击这里查看。
animate
animate 方法则可通过 JS 给元素添加动画：Element.animate(keyframes, options)
anim.animate(
[{ transform: 'translateX(0)' }, { transform: 'translateX(100px)' }, { transform: 'translateX(0)' }],
1000
);
这里的 keyframes 是一个数组，不同于 css keyframes，这里不需要定义每一个关键帧的百分比，此处会默认按照等比拆分关键帧，如果需要定义百分比，可直接在关键帧中添加 offset 参数：
anim.animate(
[{ transform: 'translateX(0)' }, { transform: 'translateX(100px)', offset: 0.3 }, { transform: 'translateX(0)' }],
1000
);
此处 keyframe 参数主要包含两种属性，第一种是对应的 css 属性的 js 表示，如 left、paddingLeft、transform 等（注意此处 css 中的 float、offset 需要写成 cssFloat、cssOffset），第二种是上面说到的 offset 一类的通用控制参数，除了 offset 外，还可设置 easing 为每个关键帧设定动画曲线：
anim.animate([{ opacity: 1, easing: 'ease-out' }, { opacity: 0.1, easing: 'ease-in' }, { opacity: 0 }], 1000);
以及 composite 参数来控制动画合成方式。
此外，keyframes 还支持第二种格式：
anim.animate(
{
opacity: [0, 0.9, 1],
offset: [0, 0.8], // Shorthand for [ 0, 0.8, 1 ]
easing: ['ease-in', 'ease-out']
},
1000
);
可直接传入一个对象，将对象中的属性通过数组表示来表示对应的关键帧。
options 则可以直接传入数字，代表动画事件或是传入动画参数：
anim.animate([{ transform: 'translateX(0)' }, { transform: 'translateX(100px)' }, { transform: 'translateX(0)' }], {
duration: 1000
});
参数和 CSS 中差不多，包括：
delay- 动画延迟direction- 动画运行方向duration- 动画运行时间easing- 动画运行曲线endDelay- 动画结束后的延迟fill- 动画完成后的填充iterations- 动画重复次数composite- 动画合成
此外还有 iterationStart、iterationComposite，需要了解可点击查看。
兼容和 polyfill
当然，该系列 API 兼容并不佳，要能够完整体验需要至少 chrome 84 以上版本，IE 则完全没戏。
不过还好有 polyfill 的存在：web-animations-js
总结
通过 Web Animations 系列 API 可以方便的控制已有的 CSS 动画、添加动画等，而不需要像以前一样使用 JS 来模拟动画，在某些特定场景下可以提高动画性能、简化动画代码。
都到看这了真不打算不点个赞吗 🐶
