首页 专题 H5案例 前端导航 UI框架

初识WAAPI

作者:TG 日期: 2016-08-17 阅读: 726
在早期,当我们的网页需要动画时,我们首先想到的是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


关注”全栈技术杂货铺“

全栈技术杂货铺