如果您曾经使用过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() 在元素上 调用该 函数：

该函数接受两个参数：

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

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

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

如果我们使用纯CSS声明上面的内容，它看起来像这样：

正如您所看到的，这两种语法非常相似，如果您已经熟悉CSS关键帧，那么将它移植到JavaScript就没有问题。 与JavaScript版本的一些区别值得记住：

• 在JavaScript版本中，属性字符串值应该在引号（ transform: 'translateX(0)' ）中

• 带连字符的属性名称必须转换为camelCase而不是（ borderRadius: 0 ）。

• 逗号而不是分号应该跟踪每个属性声明（最后一个属性除外）

默认情况下，使用JavaScript设置的关键帧在播放时均匀分布，每个关键帧的时间相同。 但是，通过 offset 在关键帧中 添加 属性，我们可以设置该关键帧应该开始播放的点，例如60％标记的0.6，类似于使用纯CSS的关键帧。

keyframeOptions参数

该 animate() 方法 的第二个参数 是一个文字，可以很好地调整动画的行为。 许多选项直接从CSS的 animation-* 属性 映射 ，例如“  animation-delay ”，“  animation-fill-mode ”等。所有属性都是可选的，如果没有设置，则回退到默认值：

这是我在上面的例子中使用的keyframeOptions参数：

如果我们想使用动画速记属性在CSS中定义相同的选项，它将如下所示：

控制动画（播放，暂停等）

使用Animation API创建关键帧动画的部分优点是可以按需操作结果，例如暂停，跳过或挂钩到动画的事件处理程序。 执行所有这些操作的第一步是在调用 animate() 方法 时将动画分配给变量 ：

var  myanimation = Element.animate(keyframes, keyframeOptions)

这将创建对 Animation对象实例的引用 ，以允许我们通过各种公开的属性和方法来操作动画：

这是修改后使用控件进行回放的原始示例：

请注意，在此示例中，我 animate() 立即 调用 目标元素，这将导致动画立即运行。 为了防止这种情况，我 pause() 随后 调用了该  方法。 这是您希望手动控制动画时使用的常用模式：

动画对象实例属性和方法

下面列出了动画对象实例的属性，方法和事件处理程序，如上所述，在为 animate() 方法 分配引用时创建 ：

属性

• currentTime : Gets or sets the current time value of the animation in milliseconds.
• effect :  Gets or sets the target effect of an animation.  Support for this property is currently limited in all browsers.
• finished : A promise object that's resolved when the animation has completed.  Support for this property is currently limited in all browsers.
• id : Gets or sets a string used to identify the animation.
• playbackRate : Integer that gets or sets a playback rate of the animation. For example, 1=normal, 0 = pause, 2 = double, -1 = backwards etc.
• playState : Read-only property that returns the current state of the animation: "idle", "pending", "running", "paused", or "finished".
• ready : A promise object that's resolved when the animation is ready to be played.  Support for this property is currently limited in all browsers.
• startTime : Floating point number that gets or sets the current time (in milliseconds) of the animation.
• timeline : Gets or sets the current timeline of the animation. Defaults to the document timeline ( document.timeline ).  Support for this property is currently limited in all browsers.

方法

• cancel() : Cancels the animation.
• finish() : Immediately completes an animation.
• pause() : Pauses an animation.
• play() : Plays an animation.
• reverse() : Reverses the current direction of the animation and plays it.

事件处理程序

• oncancel : Triggered when the animation is canceled, such as by calling the  cancel()  method.
• onfinish : Triggered when the animation is finished, such as by calling the  finish()  method.

使用Web Animation API创建简单的scrubber

通过操作 currentTime 属性，下面为我们看到的基本动画添加了一个简单的擦除器：

我创建了一个HTML5 Range Slider来用作scrubber。 当动画首次运行（自动）时，动画的 currentTime  属性值将持续传送到滑块，以使两者同步。 目前没有“onprogress”事件处理程序或类似的东西（据我所知）只在WAAPI动画运行时运行代码，所以我用它  来监视动画的进度。 动画结束后，我利用WAAPI事件 调用 并不必要地停止更新滑块。   requestAnimationFrame() onfinish cancelAnimationFrame()

每当用户与Ranger Slider交互时，我都会更新WAAPI动画以与滑块同步：

当用户按下滑块时，我暂停动画并更新滑块的值以与动画的 currentTime  属性 同步 。 当用户拖动滑块时，反过来发生 - 我同步 currentTime 属性以反映滑块的值，因此前者依赖于后者。 最后，当用户将鼠标放在滑块上时，我恢复动画的自动播放。

一次动画多个元素

在下一个示例中，我将使用WAAPI一次演示动画多个元素，并在它们全部结束后执行动作。

注意： 在撰写本文时，即使在Chrome和FF中， 对WAAPI  承诺的 原生支持也很不稳定  。 我不得不使用  Web Animation Next Polyfill 来使这个功能在浏览器中运行。

这里没有什么太复杂的事了。 基本上我循环并调用 animate()  标题中的每个字母，并将每个Animation对象实例存储在数组中。 有了这个数组，我可以根据需要循环播放一系列动画。 每个动画的 finished 属性都返回一个  Promise ，该动画在动画完成播放时被解析，我利用  Promise.all（） 在所有动画完成播放时重置整个动画。

使用 Animation() 构造函数 创建动画

到目前为止，我只使用 animate() 对象直接在一个元素上 创建了WAAPI动画 ，该元素返回一个Animation对象实例。 我会失职但更不用说你也可以使用 Animation()  构造函数来完成同样的事情。

注意： Animation() 在撰写本文时，即使在Chrome和FF中，本 机支持 也是不稳定的。 我不得不使用  Web Animation Next Polyfill 来使这个功能在浏览器中运行。

有了警告，这里是如何调用  Animation()  构造函数：

该函数接受两个参数：

• effect ：动画效果。 在撰写本文时，仅 keyframeEffect 支持 该 对象。
• timeline ：动画时间轴。 在撰写本文时，仅 document.timeline 支持。

让我们看一下如何使用一个简单的例子：

这是JavaScript代码：

新 KeyframeEffect() 对象是一个一体化对象，它包含一个位置的动画的所有设置，从目标元素，要使用的关键帧到关键帧选项。