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