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

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

本篇内容介绍了“分析JavaScript中CSS关键帧的强大功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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

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

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

该函数接受两个参数：

keyframes：包含所需CSS关键帧的JavaScript表示的文字数组
keyframeOptions：包含动画的其他设置的文字，例如缓动，持续时间，填充模式等。

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

var boxframes = [

{

变换：'translateX（0）'，

background:'red',

borderRadius: 0

},

{

transform:'translateX(200px) scale(.5)', 

background:'orange',

borderRadius: 0,

offset: 0.6

},

{

transform:'translateX(400px)',

background:'green',

borderRadius:'50%'

}

]

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

@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的关键帧。

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: 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.
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: 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.
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 i`iterationStart` 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参数：

var boxref = document.getElementById("box")

boxref.animate(boxframes, {

duration: 1000,

fill:'forwards',

easing:'ease-in'

})

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

1	`animation: animatethebox 1s ease-in` `forwards;`

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

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

var myanimation = Element.animate(keyframes, keyframeOptions)

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

var myanimation = Element.animate()

myanimation.pause()// immediately pause animation to control it manually

myanimation.curentTime = 1000// jump to 1 second from start of animation

myanimation.play()// play animation

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

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

var 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 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()onfinishcancelAnimationFrame()

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

scrubber.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（）在所有动画完成播放时重置整个动画。