初识WAAPI

作者：TG 日期： 2016-08-17 字数： 8374 阅读： 3863

在早期，当我们的网页需要动画时，我们首先想到的是flash动画、Gif图片动画、JavaScript动画以及jQuery.animate()，而随着css3属性的出现发展，越来越多的Web应用都使用css3制作酷炫的动画。

虽然实现动画的技术可以有多种不同的实现方式，但每种技术都存在一定的缺点，比如flash动画比较繁琐，JavaScript动画需要实时记录动画改变的值，复杂的gif图片动画有时会导致页面加载比较慢等等。

而WAAPI，全称：Web Animation API，是W3C提出的，它致力于集合CSS3动画的性能，JavaScript的灵活，动画库的丰富等各家所长，将尽可能多的动画控制由原生浏览器实现，并添加许多CSS不具备的变量、控制以及调试选项等。

下面，我们就真正来体会一下WAAPI的使用和神奇！

WAAPI

WAAPI的核心在于提供了：

element.animate(effect,options);

（是不是让你想到了JQuery中的animate()方法呢...）

参数说明：element是指需要有动画的元素，effect是一个KeyframeEffects数组，对应的也就是css3 Animation的@keyframes animation，而options则是AnimationEffectTimingProperties参数（也可以是一个参数，动画持续时间），对应的是css3 的animation-*属性，如下图：

另外，WAAPI还提供了AnimationEffectTimingProperties.iterationStart和AnimationEffectTimingProperties.endDelay等API。

话不多说，直接来一个例子：

<div class="move"></div>

对应动画：

document.getElementById("move").animate(   
     [   
       {   
         offset:0,   
         opacity:0,   
         transform:'translate(0,0)'   
       },   
       {   
         offset:0.25,   
         transform:'translate(100px,0)'   
       },{   
         offset:0.5,   
         transform:'translate(200px,0)'   
       },{   
         offset:0.75,   
         transform:'translate(100px,0)'   
       },{    
         offset:1,   
         opacity:1,   
         transform:'translate(0,0)'   
       }   
     ],{   
        delay: 0,   
        endDelay: 0,   
        fill: 'both',   
        iterationStart: 0,   
        iterations: 50,   
        duration: 1000,   
        direction: 'normal',   
        easing: 'linear'   
     });

对应效果如下：

在上面的代码中，offset的值是0-1，相当于CSS3 Animation中的0%-100%对应的帧，如果没有设置对应的帧率时，那么动画时间将会被平均分配。

当然，我们还可以控制动画的播放与停止：

首先，我们需要定义一个对象来接收element.animate()的返回值

var anima=document.body.animate()

这里的anima就是该动画返回的一个“动画播放器”对象，同时动画开始播放。

anima.playState  //返回动画状态 running,paused,finished

除了上面三个基本状态外，还有另外两种状态，分别是" idle"表示恢复到初始状态，" pending"表示播放或暂停即将发生时。

当然，我们还可以改变动画的当前状态。

anima.pause()  //暂停 pause
anima.play()  //播放 running
anima.cancel()  // idle
anima.finish()  //结束 finished

另外，还有一个reverse()方法来倒叙播放动画，由时间轴的终点走向起点。

我们还可以像CSS3 那样，监听动画的结束。

anima.onfinish=function(e){}

时间控制与时间轴

播放器anima还有一个读写属性playbackRate，用来控制动画的播放速度。

anima.playbackRate

playbackRate默认值为1，可以设置动画的播放速度，越大代表速度越快。

另外，anima还具有两个与时间轴相关的读写属性currentTime和startTime，前者返回动画当前过去的毫秒数，最大值是delay+(duration*iterations)。

除了直接设置外，在WAAPI中还有另一种动画方式：

new Animation(effect,timeline)

另外，要启动动画，我们还需要WAAPI中的new keyFrameEffect(element,keyframesSet,keyframeOptions)和play()方法。

var b=document.getElementById("move");   
var animeKeyframes={   
    transform:['translate(0,0)','translate(100px,0)','translate(200px,0)','translate(100px,0)','translate(0,0)'],   
    opacity:[0,1]   
};   
var animeOptions = {   
   delay: 0,   
   endDelay: 0,   
   fill: 'both',   
   iterationStart: 0,   
   iterations: 50,   
   duration: 1000,   
   direction: 'normal',   
   easing: 'cubic-bezier(.6, 0, 1, .6)'   
};   
var effect = new KeyframeEffect(b, animeKeyframes, animeOptions);   
var animation = new Animation(effect,b.ownerDocument.timeline);   
animation.play();

动画效果如下：

注意：由于目前浏览器对此方法的支持度不是很高，要想在浏览器看到有效果，需要引入一个polyfill。

<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.1/web-animations-next.min.js"></script>

参考自：大漠穷秋的《WAAPI入门》（http://www.w3cplus.com/animation/waapi-basic-intro.html）

著作权归博主所有。转载请联系博主获得授权，并标注“博主名称”。

初识WAAPI

关注”全栈技术杂货铺“

目录