web animations API

對(duì)于waapi，可能大家對(duì)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;
    }
}

平時(shí)用的較多的是百分比類型的损合，可以定義多個(gè)關(guān)鍵幀。下面來(lái)看看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() 元素調(diào)用后會(huì)立即執(zhí)行娘纷。跟css3動(dòng)畫有點(diǎn)類似但是有很多小區(qū)別嫁审，列如：

1. css3動(dòng)畫中用的時(shí)間單位為s，而wappi中使用的與setTimeout等定時(shí)器的單位及寫法一致（單位為ms且可省略）
2. waapi中關(guān)鍵幀的值傳入的是字符串類型失驶，與css3不一樣土居。
3. waapi中不再有百分?jǐn)?shù)枣购，而是用offset來(lái)設(shè)置關(guān)鍵幀的位置嬉探。
4. css3動(dòng)畫中animation-duration變?yōu)閐uriation，animation-iteration-count則變成iterations棉圈，且其無(wú)限次的值由字符串'infinite'變成關(guān)鍵字Infinity涩堤。等等還有其他一些元素的改變，從單詞來(lái)講變得更簡(jiǎn)潔了分瘾。

如果只需設(shè)置duration屬性胎围，則可采用下面這種更簡(jiǎn)潔的方式：

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

document.animate()可以應(yīng)用在任何可以使用CSS動(dòng)畫的DOM元素上，下面是幾個(gè)waapi更強(qiáng)大的控制方法：

play()德召，pause()白魂，reverse()和playbackRate控制播放

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

注：在動(dòng)畫執(zhí)行的時(shí)候可以在控制臺(tái)打印下rotateAni，能夠看到rotateAni所帶的一些屬性值及原型上的方法(此時(shí)playbackRate的值為1)上岗。

打印正在執(zhí)行的動(dòng)畫

然后發(fā)現(xiàn)除了上面這幾個(gè)之外還有一些其他的屬性及方法福荸，再挑幾個(gè)說(shuō)一下：

finish()  //對(duì)于有限次的動(dòng)畫而言，直接停止動(dòng)畫肴掷，且跳到動(dòng)畫結(jié)束位置
cancel()  //取消動(dòng)畫過(guò)程敬锐，直接跳到動(dòng)畫的開始位置
reverse() //讓動(dòng)畫反向執(zhí)行到動(dòng)畫執(zhí)行的原點(diǎn),會(huì)將playbackTate從1變成-1

playbackRate屬性
reverse()方法可將playbackRate的值改變。如果手動(dòng)將playbackRate改成一個(gè)0-1之間的數(shù)值呆瞻，則可將動(dòng)畫慢下來(lái)台夺。設(shè)成大于1的值則可使動(dòng)畫加速。

獲取動(dòng)畫信息
還有一些方法尚在實(shí)驗(yàn)中額痴脾，等瀏覽器可支持后再用起來(lái)颤介。。。

wappi的事件監(jiān)聽

onfinish:用于注冊(cè)完成事件买窟，當(dāng)調(diào)用finish()方法是也可以觸發(fā)丰泊。
oncancel:用于注冊(cè)取消事件，當(dāng)調(diào)用cancel()方法是也可以觸發(fā)始绍。

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

瀏覽器支持度