CSS Animations vs Web Animations API

摘要：方法接受两个参数关键帧和持续时间。第一个参数，关键帧，是一个对象数组，每个对象都是动画中的一个关键帧。为我们提供了两种不同的方式设置缓动在我们的关键帧数组或我们的选项对象内。实际上，这些缓动应用在关键帧之间，而不是整个动画。

作者：Ollie Williams
原文：CSS Animations vs Web Animations API

在 JavaScript 有一个原生动画 API 叫 Web Animations API，在这篇文章中简称为 WAAPI。MDN 上已经有 很好的文档，而且，Dan Wilson 为此写了 一个很棒的文章系列。

在本文中，我们一起来对比一下 WAAPI 和 CSS 动画。

尽管浏览器原生支持仍然有限，但 WAAPI 有一个全面和强大的 polyfill，使得现在就能在生产环境使用。

同样地，可以在 Can I Use 查看浏览器兼容性数据。然而，这并没有提供很好的信息来支持 WAAPI 的所有子功能。这里有一个检查工具：

See the Pen WAAPI Browser Support Test by Dan Wilson (@danwilson) on CodePen.

要想再没有 polyfill 的情况下体验所有功能，请使用 Firefox Nightly。

如果你曾经使用 jQuery 的 .animate()，那么应该会觉得 WAAPI 的基本语法看起来很熟悉。

var element = document.querySelector(".animate-me");
element.animate(keyframes, 1000);

animate 方法接受两个参数：关键帧和持续时间。与 jQuery 相比的优势是，不仅是浏览器内置，而且性能也更好。

第一个参数，关键帧，是一个对象数组，每个对象都是动画中的一个关键帧。看这个简单的例子：

var keyframes = [
  { opacity: 0 },
  { opacity: 1 }
];

第二个参数，持续时间，指的是想要动画持续多久，在上面的例子中是 1000 毫秒。接下来看一个更令人兴奋的例子。

这里有一些从 animista 拉取的 CSS 代码，被称为 slide-in-blurred-top 的入场动画。看起来很漂亮

在 实际PERF 比这个 GIF 效果好很多。

以下是 CSS 中的关键帧：

0% {
  transform: translateY(-1000px) scaleY(2.5) scaleX(.2);
  transform-origin: 50% 0;
  filter: blur(40px);
  opacity: 0;
}
100% {
  transform: translateY(0) scaleY(1) scaleX(1);
  transform-origin: 50% 50%;
  filter: blur(0);
  opacity: 1;
}

在 WAAPI 中代码基本相同：

var keyframes = [
  { 
    transform: "translateY(-1000px) scaleY(2.5) scaleX(.2)", 
    transformOrigin: "50% 0",
    filter: "blur(40px)",
    opacity: 0 
  },
  { 
    transform: "translateY(0) scaleY(1) scaleX(1)",
    transformOrigin: "50% 50%",
    filter: "blur(0)",
    opacity: 1 
  }
];

可以看出，将关键帧应用到需要动画的元素上是多么容易：

element.animate(keyframes, 700);

为了简单起见，只指定了持续时间。但是，我们可以使用这个第二个参数来传递更多的选项，至少也应该指定一个缓动效果。以下是所有可用选项的完整列表，其中包含一些示例值：

var options = {
  iterations: Infinity,
  iterationStart: 0,
  delay: 0,
  endDelay: 0,
  direction: "alternate",
  duration: 700,
  fill: "forwards",
  easing: "ease-out",
}
element.animate(keyframes, options);

加上这些选项，我们的动画将从头开始，没有任何延迟，在动画完成后往返循环播放。

不爽的是，对于熟悉 CSS 动画的人来说，一些术语跟我们习惯的有所不同。好处是打字会更快一些！

使用 easing 而不是 animation-timing-function

不是 animation-iteration-count，而是 iterations。如果我们希望动画永远重复，使用 Infinity 而不是 infinite。有点混乱， Infinity 不带引号。Infinity 是一个 JavaScript 关键字，而其他值都是字符串。

我们使用毫秒而不是秒，对于之前写过许多 JavaScript 的人来说，这应该是一样的。（你也可以在 CSS 动画中使用毫秒数，但很少有人使用。）

我们来仔细看看一个选项：iterationStart。

当我第一次碰到 iterationStart 有点困惑。为什么要从指定的迭代开始，而不是只要减少迭代次数？当使用十进制数时，此选项非常有用。例如，可以将其设置为 .5，动画将开始一半。要做一个完整的动画需要两个一半，所以如果迭代次数设置为 1，并且将 iterationStart 设置为 .5，动画将从一半到动画结束播放，然后从动画开头开始，结束于中间！

值得注意的是，也可以将迭代次数设置为小于 1。例如：

var option = {
  iterations: .5,
  iterationStart: .5
}

这样，动画会从中间开始，一直播放到最后。

endDelay：如果要将多个动画串在一起，但是希望在一个动画的结尾和后续动画的开始之间存在差距，这时 endDelay 就很有用。这是一个有用的视频，由 Patrick Brosset 来解释。

一个 YouTube 的视频

在任何动画中，缓动都是最重要的元素之一。WAAPI 为我们提供了两种不同的方式设置缓动 - 在我们的关键帧数组或我们的选项对象内。

在 CSS 中，如果使用 animation-timing-function: ease-in-out 你可能会认为动画会缓慢开始，然后缓慢结束。实际上，这些缓动应用在关键帧之间，而不是整个动画。这可以对动画的感觉进行细粒度的控制。WAAPI 也提供这种功能。

var keyframes = [
  { opacity: 0, easing: "ease-in" }, 
  { opacity: 0.5, easing: "ease-out" }, 
  { opacity: 1 }
]

值得注意的是，在 CSS 和 WAAPI 中，不应该传入最后一帧的缓动值，因为这将不起作用。可是很多人会犯这种错误。

有时候，在整个动画中添加缓动效果更为直观。这在 CSS 是不可能的，但现在可以在 WAAPI 中实现。

var options = {
  duration: 1000,
  easing: "ease-in-out",
}

可以看到这两种缓动在 CodePen 上的区别：

点我查看

值得注意的是 CSS 动画和 WAAPI 之间的另一个区别：在 CSS 中 默认值是 ease，而在 WAAPI 默认是 linear。 ease 实际上是 ease-in-out 的一个版本，当你想偷懒时这是一个非常好的选择。同时，线性代表致命的沉闷和无生命 - 一致的速度看起来机械和不自然。它被选为默认值，可能因为它是最中立的选项。然而，在使用 WAAPI 时，更好是使用缓动，以免动画看起来很乏味和机械。

WAAPI 提供与 CSS 动画相同的性能改进，尽管这并不意味着一定就是平滑的动画。

希望这个 API 的性能优化做到，使我们可以避免使用 will-change和 translateZ 成为可能。但是，至少在目前的浏览器实现中，这些属性在处理性能问题方面仍然是有帮助，有必要的。

但是，如果你的动画有延迟，则无需担心使用 will-change。web animations 规范的主要作者对 Animation for Work Slack community 提出了一些有趣的建议，希望他不介意我在这里重复：

如果有一个正向的延迟，不需要使用 will-change，因为浏览器将在延迟开始时进行分层，当动画启动时，它将准备就绪。

WAAPI 为我们提供了一套已经在 CSS 中实现的 JavaScript 语法。然而，它们不应该被视为对手。如果我们坚持使用 CSS 完成动画和转换，那么我们可以在 WAAPI 进行动画交互。

.animate() 方法不仅处理元素的动画，它也返回一些东西。

var myAnimation = element.animate(keyframes, options);

在控制台中查看的动画对象

如果我们在控制台中查看返回值，会发现这是一个动画对象。这为我们提供了各种各样的功能，其中一些是不言自明，比如 myAnimation.pause()。通过更改 animation-play-state 属性，我们可以通过 CSS 动画实现类似的结果，但 WAAPI 语法比 element.style.animationPlayState = "paused" 更简洁。我们也可以通过 myAnimation.reverse() 轻松反转动画，同样地，跟我们使用脚本更改 CSS 的 animation-direction 属性相比，稍微有点进步。

然而，到目前为止，使用 JavaScript 操作 @keyframe 并不是件容易的的事。即使是重新启动动画这样简单的事，也是需要一些技巧的，就像 Chris Coyier 先前写过的那样。使用 WAAPI，我们可以简单地使用 myAnimation.play() ，如果动画已经完成，将从一开始就重播动画，或者如果我们暂停播放，则从中间迭代播放动画。

我们甚至可以轻松地改变动画的速度。

myAnimation.playbackRate = 2; // speed it up
myAnimation.playbackRate = .4; // use a number less than one to slow it down

这个方法将返回所有动画对象的数组，包含使用 WAAPI 定义的动画和 CSS 转换或动画。

element.getAnimations() // returns any animations or transitions applied to our element using  CSS or WAAPI

如果你喜欢使用 CSS 来定义和使用动画，getAnimations() 允许 API​​ 与 @keyframes 结合使用。你可以继续使用 CSS 进行大部分动画工作，然后在需要 API 时获得使用 API 的优势。

即使一个 DOM 元素只使用到一个动画，getAnimations() 也将始终返回一个数组。我们使用那个单一的动画对象来处理。

var h2 = document.querySelector("h2");
var myCSSAnimation = h2.getAnimations()[0];

我们也可以在 CSS 动画中使用 web animation API :)

myCSSAnimation.playbackRate = 4;
myCSSAnimation.reverse();

很多通过 CSS 触发的事件，现在我们已经可以使用 JavaScript 代码来完成：   animationstart，animationend，animationiteration 和 transitionend。之前经常需要监听动画或转换的结束，以便从 DOM 中删除应用的元素。

在动画对象可以使用 WAAPI 来完成 animationend 或 transitionend 做的事情：

myAnimation.onfinish = function() {
  element.remove();
}

WAAPI 为我们提供了两个选择：event 和 promise。动画对象的 .finished 方法会返回一个在动画结束时的 promise。下面这段代码是上面例子的 promise 版本：

myAnimation.finished.then(() =>
  element.remove())

我们来看看来自 Mozilla 开发者网络中的一个稍微复杂点的例子。Promise.all 接受一个 promise 的数组，一旦所有 promise 完成才会运行回调函数。可以看出，element.getAnimations() 返回的是一个动画对象数组。我们可以将数组中的所有动画对象 map 到每个动画对象的 .finished上，这样就获得需要的 promise 数组。

在这个例子中，只有在页面上的所有动画完成后，我们的函数才能运行。

Promise.all(document.getAnimations().map(animation => 
  animation.finished)).then(function() {           
    // do something cool 
  })

本文中提到的功能只是一个开始。从目前的规范和实施来看，未来会有一个很强大动画 API。