cover
2022年8月17日 - 2023年7月9日

孤陋寡闻了,才知道已经可以用 JS 来控制 CSS 动画了

最近翻 MDN 突然发现一套叫 Web Animations API 的东东,点进去看才知道,原来是一套控制 css animationAPI,而且已经有段时间了 🤦‍♂️,而我居然一直不知道。

介绍

Web Animations API 主要包含两个 APIanimate 来执行动画,getAnimations 来获取当前元素的动画。

并且 getAnimations 不止可以获取到 animate 创建的动画,css 中的动画同样可以获取到。

getAnimations

先来个小 Demo

https://code.juejin.cn/pen/7132756019978338315

如上 Demo 所示,通过 getAnimations 我们可以获取到当前元素的正在运行的动画的 Animate 对象,如果传入参数 {subtree: true} 还能获取到包括其所有子元素、伪元素的动画。

通过拿到的 animate,我们可以直接对其进行各种操作,如:

  • pause - 暂停动画
  • play - 播放动画
  • cancel - 取消动画状态
  • reverse - 反向执行动画到开始状态
  • finish - 直接跳到动画结束阶段

此外还有一些其他比较少用的方法,如 commitStylespersist 等。

通过上述 API,我们可以轻易的通过 JS 来控制动画的执行,而不需要像以前一样通过改写 CSS 样式来控制。

除了上述的一些操作方法外,animate 中还有很多动画的属性,包括运行状态的 Promisetimelineeffect 等。

其中如 finishedPromise 在动画控制时也很好用,比如创建一个动画后需要在动画完成后做一些处理直接 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 表示,如 leftpaddingLefttransform 等(注意此处 css 中的 floatoffset 需要写成 cssFloatcssOffset),第二种是上面说到的 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 - 动画合成

此外还有 iterationStartiterationComposite,需要了解可点击查看

兼容和 polyfill

当然,该系列 API 兼容并不佳,要能够完整体验需要至少 Chrome 84 以上版本,IE 则完全没戏。

不过还好有 polyfill 的存在:web-animations-js

总结

通过 Web Animations 系列 API 可以方便的控制已有的 CSS 动画、添加动画等,而不需要像以前一样使用 JS 来模拟动画,在某些特定场景下可以提高动画性能、简化动画代码。