分析JavaScript中CSS关键帧的强大功能

本篇内容介绍了“分析JavaScript中CSS关键帧的强大功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！要使用Web Animation API为关键帧动画设置动画，只需animate()在元素上调用该函数：1"vertical-align: inherit;">"vertical-align: inherit;">Element.animate（关键帧，关键帧选项）该函数接受两个参数：
keyframes：包含所需CSS关键帧的JavaScript表示的文字数组keyframeOptions：包含动画的其他设置的文字，例如缓动，持续时间，填充模式等。看一下下面的简单示例，该示例使用animate()函数而不是CSS关键帧来渲染动画：123456789101112131415161718"vertical-align: inherit;">"vertical-align: inherit;">var
boxframes = ["vertical-align: inherit;">"vertical-align: inherit;">{"vertical-align: inherit;">"vertical-align: inherit;">变换：'translateX（0）'，background:
'red',borderRadius: 0},{transform:
'translateX(200px) scale(.5)', background:
'orange',borderRadius: 0,offset: 0.6
/* set explicit point (60%) when frame starts */},{transform:
'translateX(400px)',background:
'green',borderRadius:
'50%'}]如果我们使用纯CSS声明上面的内容，它看起来像这样：12345678910111213141516171819@keyframes animatethebox{0%{transform: translateX(0);background: red;borderRadius: 0;}60%{transform: translateX(200px) scale(.5);background: orange;borderRadius: 0;}100%{transform: translateX(400px);background: green;borderRadius: 50%;}}正如您所看到的，这两种语法非常相似，如果您已经熟悉CSS关键帧，那么将它移植到JavaScript就没有问题。与JavaScript版本的一些区别值得记住：在JavaScript版本中，属性字符串值应该在引号（transform: 'translateX(0)'）中带连字符的属性名称必须转换为camelCase而不是（borderRadius: 0）。逗号而不是分号应该跟踪每个属性声明（最后一个属性除外）默认情况下，使用JavaScript设置的关键帧在播放时均匀分布，每个关键帧的时间相同。但是，通过offset在关键帧中添加属性，我们可以设置该关键帧应该开始播放的点，例如60％标记的0.6，类似于使用纯CSS的关键帧。该animate()方法的第二个参数是一个文字，可以很好地调整动画的行为。许多选项直接从CSS的animation-*属性映射，例如“animation-delay”，“animation-fill-mode”等。所有属性都是可选的，如果没有设置，则回退到默认值：normal: The animation plays forward as normal. After each animation cycle, the animation resets to the beginning state and starts over again.Default value.reverse: Plays the animation in reverse, starting from the end state. After each animation cycle, the animation resets to the end state and starts over again.alternate: The animation alternates between normal and reverse directions. In reverse, the animation starts at the end state and plays backwards. The animation timing function is also reversed.alternate-reverse: The animation alternates between reverse and normal directions, starting in reverse for the first iteration.none: The animation should not apply any styles to the target when it is not playing.Default value.forwards: The target element will retain the computed styles defined in the last key frame (ie: when key frame is at 100%) when the animation isn’t playing.backwards: The target element will retain the computed styles defined in the first key frame (ie: when key frame is at 0%) when the animation isn’t playing.both: The target element will retain the computed styles defined in both the first and last key frames when the animation isn’t playing.这是我在上面的例子中使用的keyframeOptions参数：123456var
boxref = document.getElementById("box")boxref.animate(boxframes, {duration: 1000,fill:
'forwards',easing:
'ease-in'})如果我们想使用动画速记属性在CSS中定义相同的选项，它将如下所示：1animation: animatethebox 1s ease-in
forwards;使用Animation API创建关键帧动画的部分优点是可以按需操作结果，例如暂停，跳过或挂钩到动画的事件处理程序。执行所有这些操作的第一步是在调用animate()方法时将动画分配给变量：varmyanimation = Element.animate(keyframes, keyframeOptions)这将创建对Animation对象实例的引用，以允许我们通过各种公开的属性和方法来操作动画：1234var
myanimation = Element.animate(/* .. */)myanimation.pause()
// immediately pause animation to control it manuallymyanimation.curentTime = 1000
// jump to 1 second from start of animationmyanimation.play()
// play animation这是修改后使用控件进行回放的原始示例：请注意，在此示例中，我animate()立即调用目标元素，这将导致动画立即运行。为了防止这种情况，我pause()随后调用了该方法。这是您希望手动控制动画时使用的常用模式：1234567var
boxanimation = boxref.animate(boxframes, {duration: 1000,fill:
'both',easing:
'ease-in'})boxanimation.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 thecancel()method.onfinish: Triggered when the animation is finished, such as by calling thefinish()method.通过操作currentTime属性，下面为我们看到的基本动画添加了一个简单的擦除器：我创建了一个HTML5 Range Slider来用作scrubber。当动画首次运行（自动）时，动画的currentTime属性值将持续传送到滑块，以使两者同步。目前没有“onprogress”事件处理程序或类似的东西（据我所知）只在WAAPI动画运行时运行代码，所以我用它来监视动画的进度。动画结束后，我利用WAAPI事件调用并不必要地停止更新滑块。

requestAnimationFrame()onfinishcancelAnimationFrame()每当用户与Ranger Slider交互时，我都会更新WAAPI动画以与滑块同步：123456789101112scrubber.addEventListener('mousedown', ()=>{boxanimation.pause()updateScrubber()})scrubber.addEventListener('mouseup', ()=>{boxanimation.play()})scrubber.addEventListener('input', ()=>{boxanimation.currentTime = scrubber.value * animationlength})当用户按下滑块时，我暂停动画并更新滑块的值以与动画的currentTime属性同步。当用户拖动滑块时，反过来发生 – 我同步currentTime属性以反映滑块的值，因此前者依赖于后者。最后，当用户将鼠标放在滑块上时，我恢复动画的自动播放。在下一个示例中，我将使用WAAPI一次演示动画多个元素，并在它们全部结束后执行动作。注意：在撰写本文时，即使在Chrome和FF中，对WAAPI承诺的原生支持也很不稳定。我不得不使用Web Animation Next Polyfill来使这个功能在浏览器中运行。这里没有什么太复杂的事了。基本上我循环并调用animate()标题中的每个字母，并将每个Animation对象实例存储在数组中。免费云主机、域名有了这个数组，我可以根据需要循环播放一系列动画。每个动画的finished属性都返回一个Promise，该动画在动画完成播放时被解析，我利用Promise.all（）在所有动画完成播放时重置整个动画。到目前为止，我只使用animate()对象直接在一个元素上创建了WAAPI动画，该元素返回一个Animation对象实例。我会失职但更不用说你也可以使用Animation()构造函数来完成同样的事情。注意：Animation()在撰写本文时，即使在Chrome和FF中，本机支持也是不稳定的。我不得不使用Web Animation Next Polyfill来使这个功能在浏览器中运行。有了警告，这里是如何调用Animation()构造函数：1var
myanimation =
new
Animation([effect][, timeline]);该函数接受两个参数：effect：动画效果。在撰写本文时，仅keyframeEffect支持该对象。timeline：动画时间轴。在撰写本文时，仅document.timeline支持。让我们看一下如何使用一个简单的例子：这是JavaScript代码：1234567891011121314var
boxref = document.getElementById("box")var
boxkeyFrames =
new
KeyframeEffect( boxref,
// element to animate[{ transform:
'translateX(0) rotate(0deg)', background:'red'
},
// keyframe { transform:
'translateX(90vw) rotate(180deg)', background:'blue'
}], { duration: 2000, fill:
'forwards', iterations: 5 }
// keyframe options);var
boxanimation =
new
Animation(boxkeyFrames, document.timeline)boxanimation.play()新KeyframeEffect()对象是一个一体化对象，它包含一个位置的动画的所有设置，从目标元素，要使用的关键帧到关键帧选项。“分析JavaScript中CSS关键帧的强大功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站，小编将为大家输出更多高质量的实用文章！

相关推荐: JavaScript的Date对象怎么用

本篇内容介绍了“JavaScript的Date对象怎么用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！接下来说明 JS 第二类常见的内置对象 —— Date 对…