Web Animations API (JS动画利器)

原文地址：→传送门

写在前面

以前学习了CSS animation/setTimeout/setInterval/requestAnimationFrame等，这些均可以用在某种场景下的小动画，也能够说是动效。CSS动画君竟然强大，可是缺陷也不少啊，有的时候无法知足要求，定时器用在动画中就更不使用了，可是requestAnimationFrame也是个很强大的东西，具体详情移步到window.requestAnimationFrame关于动画，你须要知道的requestAnimationFrame-张鑫旭这几篇文章。下面作的笔记是关于Web Animations API (WAAPI)的，也就是js中的animate。

web animations API

对于waapi，可能你们对css animation更熟悉，下面先看下css animation的用法：

.item1{
    animation: rotate  4s inifite ease running;
}
@keyframes rotate{
    from{
        transform：rotate(0);
    }
    to{
        transform:rotate(360deg);
    }
}
或者
@keyframes rotate{
    0%{
        transform：rotate(0);
        background-color：red;
    }
    40%{
        background-color：blue;
    }
    100%{
        transform:rotate(360deg);
        background-color:red;
    }
}

平时用的较多的是百分比类型的，能够定义多个关键帧。下面来看看waapi版本的：

var ani1 = [
        {transform:'rotate(0)',backgroundColor:'red'},
        {backgroundColor:'blue',offset:0.4},
        {transform:'rotate(360deg)',backgroundColor:'red'}
    ];
    var aniOpt1 = {
        duration:4000,
        iterations:Infinity,
        easing:'ease-in-out'
    };

    document.querySelector(".item1").animate(ani1,aniOpt1);

Element.animate() 元素调用后会当即执行。跟css3动画有点相似可是有不少小区别，列如：

1. css3动画中用的时间单位为s，而wappi中使用的与setTimeout等定时器的单位及写法一致（单位为ms且可省略）
2. waapi中关键帧的值传入的是字符串类型，与css3不同。
3. waapi中再也不有百分数，而是用offset来设置关键帧的位置。
4. css3动画中animation-duration变为duriation，animation-iteration-count则变成iterations，且其无限次的值由字符串'infinite'变成关键字Infinity。等等还有其余一些元素的改变，从单词来说变得更简洁了。

若是只需设置duration属性，则可采用下面这种更简洁的方式：

document.querySelector(".item1").animate(ani1,4000);

document.animate()能够应用在任何可使用CSS动画的DOM元素上，下面是几个waapi更强大的控制方法：

play()，pause()，reverse()和playbackRate控制播放

var rotateAni = document.querySelector(".item1").animate(ani1,aniOpt1);  
rotateAni.play() //播放
rotateAni.pause() //暂停

注：在动画执行的时候能够在控制台打印下rotateAni，可以看到rotateAni所带的一些属性值及原型上的方法(此时playbackRate的值为1)。

而后发现除了上面这几个以外还有一些其余的属性及方法，再挑几个说一下：

finish()  //对于有限次的动画而言，直接中止动画，且跳到动画结束位置
cancel()  //取消动画过程，直接跳到动画的开始位置
reverse() //让动画反向执行到动画执行的原点,会将playbackTate从1变成-1

playbackRate属性
reverse()方法可将playbackRate的值改变。若是手动将playbackRate改为一个0-1之间的数值，则可将动画慢下来。设成大于1的值则可以使动画加速。

获取动画信息
还有一些方法尚在实验中额，等浏览器可支持后再用起来。。。

wappi的事件监听

onfinish:用于注册完成事件，当调用finish()方法是也能够触发。
oncancel:用于注册取消事件，当调用cancel()方法是也能够触发。

rotateAni.onfinish = function(){
    doSomething();
}
rotateAni.oncancel = function(){
    doSomething();
}

浏览器支持度

一图胜前言can i use

小结

1. 因为目前浏览器支持度不算高，因此呢仍是要慎用。
2. 在现代浏览器中，使用wappi能够作出很酷的动画，能够多试试。
3. 本文也只算是学习笔记，因此欢迎大佬们指点额~

参考资料

• WAAPI-w3cplus
• web animations-w3cplus
• Web Animations API-MDN