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