[游戏开发]CSS 动画与 Web 动画 API

JavaScript 中有一个用于动画的原生 API，称为 Web Animations API。在这篇文章中，我们将其称为 WAAPI。

在本文中，我们将比较 WAAPI 和用 CSS 完成的动画。

关于浏览器支持的说明

当代浏览器的支持是有限的，WAAPI 有一个全面和强大的 polyfill 工具，使得它可以在生产环境下使用。polyfill 是 Web 动画 API 的 JavaScript 实现，它在本机不支持它的浏览器中提供 Web 动画功能。当一个可用时，polyfill 回退到本机实现。

WAAPI基础

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

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

该 animate 方法接受两个参数：关键帧和持续时间。与 jQuery 相比，它不仅具有内置于浏览器的优点，而且性能更高。

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

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

第二个参数，持续时间，是我们希望动画持续多长时间。在上面的例子中，它是 1000 毫秒。让我们看一个更令人兴奋的例子。

使用 WAAPI 重新创建 animista CSS 动画

这是 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);

缓动

缓动是任何动画中最重要的元素之一。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',
}

值得注意的是 CSS 动画和 WAAPI 之间的另一个区别：CSS 的默认值是 ease，而 WAAPI 的默认值是 linear。

WAAPI 提供了与 CSS 动画相同的性能改进，可以实现流畅的动画，意味着我们 will-change 可以避免使用。

动画对象

该 .animate() 方法不仅为我们的元素设置动画，它还返回一些东西。

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

如果我们查看控制台中的返回值，我们会看到它是一个动画对象。这为我们提供了各种功能，其中一些功能一目了然，例如 myAnimation.pause(). 我们也可以通过更改 animation-play-state 属性来使用 CSS 动画实现类似的效果 element.style.animationPlayState = "paused". 我们还可以轻松地反转我们的动画 myAnimation.reverse() 。

使用 WAAPI，我们可以简单地使用 myAnimation.play() 从头开始播放动画，如果它之前已经完成，或者如果我们暂停它，则从中间迭代播放它。

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

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

获取动画

此方法将为我们返回 WAAPI 定义的任何动画以及任何 CSS transitions 或者 animations 动画。

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

如果您觉得使用 CSS 来定义和应用动画很舒服并且满意，则 getAnimations() 允许您将 API 与@keyframes 结合使用。

即使一个 DOM 元素只应用了一个动画，getAnimations() 也将始终返回一个数组。让我们获取要使用的单个动画对象。

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

现在我们可以在我们的 CSS 动画上使用 web 动画 API 了 😃

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

事件 promise

我们已经有各种各样的 CSS，我们可以在我们的 JavaScript 代码利用触发事件： ? animationstart，animationend，animationiteration 和 transitionend。我经常需要监听动画或过渡的结束，然后从 DOM 中删除它应用到的元素。

在 WAAPI 中使用 onfinish，与 animationend 或 transitionend 相同：

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

WAAPI 为我们提供了使用事件和 promise 两种选择。 finished 我们的动画对象的属性将返回一个在动画结束时解析的 promise。以下是使用 promise 的上述示例：

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

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

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