Web Animation API-释放JavaScript中CSS关键帧的强大功能

如果您曾经使用过CSS3关键帧动画，那么您可能会对这个功能感到非常欣赏并感到受到严重阻碍。一方面，CSS关键帧允许您使用纯CSS创建复杂的动画，尽管其中也存在问题 - 所有内容都必须在CSS内部预先声明。我最喜欢的jQuery方法之一就是这个 animate()方法，它可以让我快速设置元素动画，而无需在CSS和JavaScript之间来回切换。

从jQuery获取页面 ，JavaScript的Web Animation API最终提供了一种简单的本机JavaScript方法，可以使用CSS关键帧的全部功能为元素设置动画，而无需离开JavaScript环境。方便的方法和事件处理程序允许您暂停，倒回，跳转到动画时间轴中的某个点，等等。

好的，首先是所有重要的问题 - 浏览器兼容性。根据CanIuse的说法，除了IE之外，所有主流浏览器都支持Web Animation API的核心功能 ：

 

 

 

To start using WAAPI today, you can turn to the web-animation API polyfill, which brings IE as well onto the playing field. So no more excuses to not continue reading!

要立即开始使用WAAPI，您可以转向web动画API polyfill，它将IE也带到了游戏领域。所以没有更多的借口不继续阅读！

创建一个简单的关键帧Web Animation

要使用Web Animation API为关键帧动画设置动画，只需animate()在元素上调用该函数：

1	<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Element.animate（关键帧，关键帧选项）</font></font>

This function accepts two arguments:

• keyframes: Array of literals containing a JavaScript representation of the desired CSS keyframes

• keyframeOptions: A literal containing additional settings for the animation, such as easing, duration, fill-mode etc.

Take a look at the following simple example, which uses the animate() function instead of CSS keyframes to render an animation:

 

该函数接受两个参数：

• keyframes：包含所需CSS关键帧的JavaScript表示的文字数组

• keyframeOptions：包含动画的其他设置的文字，例如缓动，持续时间，填充模式等。

看一下下面的简单示例，该示例使用 animate()函数而不是CSS关键帧来渲染动画：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">var boxframes = [</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">     {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">         变换：'translateX（0）'，</font></font><font></font>         background: 'red',<font></font>         borderRadius: 0<font></font>     },<font></font>     {<font></font>         transform: 'translateX(200px) scale(.5)', <font></font>         background: 'orange',<font></font>         borderRadius: 0,<font></font>         offset: 0.6 /* set explicit point (60%) when frame starts */<font></font>     },<font></font>     {<font></font&g