什么是Web Animation API?
Web Animation API 提供了一个接口,允许使用JS来创建Animation对象,并用其来控制元素的动画表现。
在了解WEB动画API之前,让我们重温一下大家也许更熟悉的CSS的animation属性。
各位前端工程师在制作WEB元素动画的时候,或多或少都会使用过CSS 的 animation属性,比如我们需要让一个元素从白色渐变到黑色并不断循环,用CSS的做法大致如下:
首先定义@keyframes
@keyframes white2black {
0% {
background: white }
100% {
background: black }
}
如上代码中我们定义了一个名为white2black
的keyframes,将他运用到我们需要的元素上,只需要在样式表中为我们需要的设置animation属性:
div {
width: 200px;
height: 200px;
animation: red2black 2s infinite linear;
}
就能很简单的实现一个元素从白色渐变到黑色并不断循环的效果。
那如果用Web Animation API 来实现要怎么做呢?
使用此API与使用CSS动画有许多相似的地方。使用动画API同样也需要keyframes,不过形式有些许不同。
const kfs = [
{
'background': 'white'},
{
'background': 'black'},
];
可以发现在脚本中定义的keyframes,可以不需要指定百分比,因为API会根据keyframes的数量平均分配到指定的百分比,如果在white和balck之间还有一个{'background': 'blue'}
,那么blue的关键帧会被自动放在50%的位置,如果需要自己指定,那么则可以指定属性offest,比如{'background': 'blue', offset: 0.7}
,那么和在CSS中设置 70%是一样的。
定义好keyframes,接下来我们需要将他运用到指定的元素之上,假设我们有一个id="div"的Element。
let div = document.getElementById('div');
div.animate(kfs,{
duration: 2000, iterations: Infinity});
这样就能很简单的实现和CSS一样的效果,不过值得一提的是,CSS默认的timing-function是ease,而WAAPI则是linear。
有人可能会说,那这样为什么我不用CSS来实现,而需要WAAPI呢。主要是WAAPI提供了许多方便控制动画的方法。
div.animate 方法会返回一个Animation对象实例,其中有许多方法是很实用的。
- Animation.cancel() 清除此动画的所有keyframeEffects,并中止播放。
- Animation.finish() 设置动画中止播放。
- Animation.pause() 暂停播放动画。
- Animation.play() 开始或恢复播放动画,或者如果之前完成,则重新开始动画。
- Animation.reverse() 反转播放动画,直到播放到动画开始时停止。 如果动画完成或未播放,它将从头到尾播放。
以及好用的回调函数:
- Animation.oncancel 获取并设置取消事件的事件处理程序。
- Animation.onfinish 获取并设置完成事件的事件处理程序。
实战:点击后元素抖动消失
现在产品有一个需求,需要提示框在点击确认或者取消之后,先抖动一下,然后缩小消失。那么我们就可以用WAAPI来实现。
我们先简单的设计一个提示框出来。
<!-- HTML 部分-->
<body>
<div id="block" class="dialog block">
<div class="title">提示的内容</div>
<button class="btn">确认</