一、遠觀：認識WAAPI
當我們談及網頁動畫時，自然聯想到的是CSS3動畫、JS動畫、SVG動畫、APNG動畫等技術以及jQuery.animate()等動畫封裝庫，根據實際動畫內容設計去選擇不同的實現方式。然而，每個現行的動畫技術都存在一定的缺點，如CSS3動畫必須通過JS去獲取動態改變的值，setInterval的時間往往是不精確的而且還會卡頓，APNG動畫會帶來檔案體積較大的困擾，引入額外的動畫封裝庫也並非對效能敏感的業務適用。目前情形對開發者而言，魚和熊掌似乎不可兼得，既希望獲得更強大便捷的動畫控制能力，又希望效能和體驗上足夠流暢優雅，如果能有一種瀏覽器原生支援的通用的動畫解決方案，那將是極好極好的呢。
W3C提出Web Animation API（簡稱WAAPI）正緣於此，它致力於集合CSS3動畫的效能、JavaScript的靈活、動畫庫的豐富等各家所長，將盡可能多的動畫控制由原生瀏覽器實現，並新增許多CSS不具備的變數、控制以及或調的選項。看起來一切都很棒，是不是以後我們在動畫技術選型上可以一招鮮吃遍天了呢？接下來請跟我一起敲開Web Animation API的奇妙之門。
二、入門：從例項開始
WAAPI核心在於提供了
|
1 |
Element.animate() |
方法，下面看個最簡單的例子：
|
1 2 3 |
document.body.animate( [{'background': 'red'}, {'background': 'green'}, {'background': 'blue'}] , 3000); |
使用Chrome 39以上的瀏覽器執行一下，頁面背景色進行了紅綠藍的依次過渡，3s後結束。我們當然是不會滿足於這麼簡單的控制引數，繼續看下個例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var dot = document.querySelector('.dot'); var frames = [ {transform: 'rotate(0deg) translate(80px)'}, {transform: 'rotate(360deg) translate(80px) '}, ]; var timing = { duration: 2500, //ms delay: 0, //ms iterations: Infinity, //1, 2, 3 ... Infinity direction: 'alternate', //'normal', 'reverse'等 easing: 'ease-in-out', //'linear', 'ease-in'等 fill: 'forwards', //'backwards', 'both', 'none', 'auto' }; dot.animate(frames, timing); |
可以看到DOM節點具備全新的animate方法，第一個引數是關鍵幀陣列frames[]，對應CSS3中的@keyframes，每一幀的描述與css3極其類似；第二個引數是時間控制timing，包括有duration持續時間、iterations執行次數、direction動畫方向、easing緩動函式等屬性。是不是很像CSS3的語法，以上timing引數等同於：
|
1 2 3 |
.dot { animation: frames 2500ms ease-in-out 0ms infinite alternate forwards; } |
效果如下所示：
三、進院：細數WAAPI眾妙
動畫回撥與動畫狀態
在最初的例子中，我們可以定義一個物件來接收Element.animate()的返回值，如：
|
1 |
var player = document.body.animate(/* ... */); |
player即成為該動畫返回的一個“動畫播放器”物件，同時動畫開始播放。我們需要了解動畫當前的狀態，可以通過該物件的只讀屬性playState來獲得：
|
1 |
console.log(player.playState); //"running","paused","finished"... |
播放器共有五種狀態，除了程式碼中註釋的三種基本狀態，還包括”idle”表示恢復到初始狀態，”pending”表示播放或者暫停即將發生時。
播放器可以通過四種方法可以改變動畫當前的狀態。
|
1 2 3 4 |
player.pause(); //"paused" player.play(); //"running" player.cancel(); //"idle" player.finish(); //"finished" |
與CSS3動畫類似，player可以為動畫自然結束或者手動結束時指定一個onfinish函式。
|
1 2 3 |
player.onfinish = function(e) { // ... } |
請注意，設定播放次數Infinity的動畫沒有自然結束的時機去呼叫onfinish函式。
時間控制與時間軸
播放器player具有一個讀寫屬性playbackRate，用於控制動畫的播放速度。
|
1 2 3 |
var player = element.animate(/* ... */); console.log(player.playbackRate); //1 player.playbackRate = 2; |
playbackRate預設值為1，可以通過設定更大的整數使得動畫加速，也可以通過設定大於零的小數來使得動畫減緩播放速度。
player還具有兩個與時間相關的讀寫屬性currentTime和startTime。前者返回動畫當前過去的毫秒數，它的最大值是timing引數設定的delay+(duration*iterations)，而設定Infinity的動畫沒有currentTime的最大值。
當設定了playbackRate時，動畫的currentTime並不會發生變化，真正變化的是時間軸，播放速度改變使得時間軸被相應拉伸或者壓縮。
播放器可以呼叫reverse()倒敘播放動畫，由時間軸的終點走向起點，動畫結束時currentTime的值回到0。
|
1 2 3 |
player.onfinish = function() { player.reverse(); } |
多個動畫
CSS3動畫是可以同時指定多個keyframes動畫到一個DOM節點上，WAAPI同樣具備應用多個動畫的能力。在一個元素上多次呼叫animate方法，即實現了一個元素多個動畫：
|
1 2 3 4 5 |
var animated = document.getElementById('toAnimate'); var pulseKeyframes, activateKeyframes, haveFunKeyframes; var pulse = animated.animate(pulseKeyframes, 1000); var activate = animated.animate(activateKeyframes, 3000); var haveFunWithIt = animated.animate(haveFunKeyframes, 2500); |
每個子動畫也擁有獨立的timing引數，以及獨立的動畫狀態（播放、停止、完成、取消）和獨立的時間軸（啟動時間、播放速度和結束時間），方便動畫進行細節控制。
更高階的介面
WAAPI還擁有timeline屬性，對動畫進行分組和排序的能力，以及沿自定義路徑移動（再也不是SVG的天下了）的能力，光這一點就足夠令人激動不已，然而篇幅有限於是下回再表。
四、登堂：官方案例
Codelabs 越來越多基於WAAPI的Codelabs例項湧現，這些例項非常適合初接觸WAAPI的同學作為開始的範例。 [https://github.com/web-animations/web-animations-codelabs]
Google’s demos 如果你希望用WAAPI挑戰更炫酷的動畫，特別是遵循Material Design風格的動畫效果，這將是不錯的靈感來源。 [http://web-animations.github.io/web-animations-demos]
五、上座：移動端執行
看到這裡，相信你已經不只一次體驗到WAAPI帶來的驚喜。作為一名徹頭徹尾的移動端H5開發，我當然也想把WAAPI應用到移動業務上去服務使用者…什麼？手機上怎麼沒效果！
[http://caniuse.com/#feat=web-animation]
為了在現代瀏覽器廠商還沒完全跟進到位的時候搶先用上WAAPI，我們可以選擇引入針對Web Animation API的Polyfill庫[https://github.com/web-animations/web-animations-js]，從而在IE/Firefox/Safari等瀏覽器上體驗到WAAPI的精彩。
|
1 2 3 4 5 6 7 |
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script> <script> document.body.animate([ {'background': 'red'}, {'background': 'green'} ], 1000); </script> |
移動端瀏覽器，Android 5.0以上的Android Browser和Chrome for Android本身就已經支援WAAPI了，加上Polyfill之後，iOS的Safari也支援了。別忘了，還有我大手Q的X5核心瀏覽器。
至此，小夥伴們終於露出欣慰的笑容。敬請期待下篇《Web Animation API 從上座到書墨》。
六、品茗：參考文獻
- W3C Spec：https://w3c.github.io/web-animations/
- 《Let’s talk about the Web Animations API》：http://danielcwilson.com/blog/2015/07/animations-intro/
- Google’s Demo：http://web-animations.github.io/web-animations-demos/
- codelabs： https://github.com/web-animations/web-animations-codelabs
- Polyfill： https://github.com/web-animations/web-animations-js
- Resources：https://developers.google.com/web/updates/2015/10/web-animations-resources