本篇内容介绍了“分析JavaScript中CSS关键帧的强大功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
创建一个简单的关键帧Web Animation
要使用Web Animation API为关键帧动画设置动画，只需animate()在元素上调用该函数：
1 |
|
该函数接受两个参数：
keyframes：包含所需CSS关键帧的JavaScript表示的文字数组keyframeOptions：包含动画的其他设置的文字，例如缓动，持续时间，填充模式等。
看一下下面的简单示例，该示例使用 animate()函数而不是CSS关键帧来渲染动画：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
如果我们使用纯CSS声明上面的内容，它看起来像这样：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
正如您所看到的，这两种语法非常相似，如果您已经熟悉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”等。所有属性都是可选的，如果没有设置，则回退到默认值：
| property | CSS Property Equivalent | Description |
|---|---|---|
| id | none | Option that sets the name of this Animation to refer back to later in your code. |
| delay | animation-delay | The delay (integer) before the animation starts in milliseconds. Defaults to 0s. |
| direction | animation-direction | Defines whether the animation should play as normal, in reverse, or alternate between the two. Possible values are:
|
| duration | animation-delay | The duration (integer) of the animation in milliseconds, such as 1000. Default to 0 (no animation, jumps to last frame). |
| easing | animation-timing-function | Sets the easing function used to animate the @keyframe animation. Valid values include "ease", "ease-in", "ease-in-out","linear", "frames(integer)" etc. Defaults to "linear". |
| endDelay | n/a | The number of milliseconds to delay after the end of an animation. This is useful when sequencing multiple animations based on the end time of another animation. Defaults to 0. |
| fill | animation-fill-mode | Defines how the animation should apply styles to its target when the animation isn't playing anymore. Defaults to "none". Possible values are:
|
| iterationStart | n/a | Sets the point in the iteration the animation should start. The value should be a positive, floating point number. In an animation with 1 iteration, a iterationStart value of 0.5 starts the animation half way through. In an animation with 2 iterations, a iiterationStart value of 1.5 starts the animation half way through the 2nd iteration etc. Defaults to 0.0. |
| iterations
| animation-iteration-count | Sets the number of times the animation should run before stopping. A value of Infinity means forever. Defaults to 1. |
这是我在上面的例子中使用的keyframeOptions参数：
1 2 3 4 5 6 |
|
如果我们想使用动画速记属性在CSS中定义相同的选项，它将如下所示：
1 |
|
控制动画（播放，暂停等）
使用Animation API创建关键帧动画的部分优点是可以按需操作结果，例如暂停，跳过或挂钩到动画的事件处理程序。执行所有这些操作的第一步是在调用animate()方法时将动画分配给变量：
var myanimation = Element.animate(keyframes, keyframeOptions)
这将创建对Animation对象实例的引用，以允许我们通过各种公开的属性和方法来操作动画：
1 2 3 4 |
|
这是修改后使用控件进行回放的原始示例：
请注意，在此示例中，我animate()立即调用目标元素，这将导致动画立即运行。为了防止这种情况，我pause()随后调用了该 方法。这是您希望手动控制动画时使用的常用模式：
1 2 3 4 5 6 7 |
|
动画对象实例属性和方法
下面列出了动画对象实例的属性，方法和事件处理程序，如上所述，在为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 thecancel()method.onfinish: Triggered when the animation is finished, such as by calling thefinish()method.
使用Web Animation API创建简单的scrubber
通过操作currentTime属性，下面为我们看到的基本动画添加了一个简单的擦除器：
我创建了一个HTML5 Range Slider来用作scrubber。当动画首次运行（自动）时，动画的currentTime 属性值将持续传送到滑块，以使两者同步。目前没有“onprogress”事件处理程序或类似的东西（据我所知）只在WAAPI动画运行时运行代码，所以我用它 来监视动画的进度。动画结束后，我利用WAAPI事件调用并不必要地停止更新滑块。
requestAnimationFrame()onfinishcancelAnimationFrame()
每当用户与Ranger Slider交互时，我都会更新WAAPI动画以与滑块同步：
1 2 3 4 5 6 7 8 9 10 11 12 |
|
当用户按下滑块时，我暂停动画并更新滑块的值以与动画的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() 构造函数：
1 |
|
该函数接受两个参数：
effect：动画效果。在撰写本文时，仅keyframeEffect支持该对象。timeline：动画时间轴。在撰写本文时，仅document.timeline支持。
让我们看一下如何使用一个简单的例子：
这是JavaScript代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
新KeyframeEffect()对象是一个一体化对象，它包含一个位置的动画的所有设置，从目标元素，要使用的关键帧到关键帧选项。
“分析JavaScript中CSS关键帧的强大功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
