JavaScript CSS animation

利用WAAPI(Web Animations API)製作動態效果

一般來說，網頁動畫常使用 Javascript、CSS、SVG 等方式製作，尤其近期 SVG 動畫有越來越流行的趨勢，這些方法都各有優缺，WAAPI則企圖融合 CSS 的性能（支援硬體加速，但動態調整仍需依靠 Javascript），以及 Javascript 的易於調整，並以原生 API 來達成！

我們先來看一下基本功

基本用法：

element.animate(keyframes, timing);

只有短短一行。

keyframes 和 timing 是 WAAPI 需要的兩個參數，如果熟悉 CSS 動畫的寫法，應該會覺得非常容易：

var keyframes = [{
  background: "#fff"
}, {
  background: "#f00"
}, {
  background: "#ff0"
}, {
  background: "#f0f"
}, {
  background: "#00f"
}, {
  background: "#0ff"
}];

var timing = {
  duration: 5000, // animation-duration(ms)
  delay: 0, // animation-delay(ms)
  iterations: 1, // animation-iteration-count: [number, Infinity...]
  direction: 'alternate', // animation-direction: [normal, reverse...]
  easing: 'ease-in-out', // animation-timing-function: [linear, ease, ease-in, ease-out...]
  fill: 'both' // animation-fill-mode [none,forwards, backwards, both...]
};

keyframes 的寫法就像是 CSS 中的@keyframes， timing 則是調整持續時間、delay、執行次數……等

了解上面的基礎用法，我們就可以來寫一些簡單的動畫了： 改變背景顏色

進階用法

如果有仔細看上面的例子，應該會發現，動畫居然還可以做播放、暫停、倒帶等操作！ 要怎麼做呢？

我們延續基本用法，定義一個animate的元素：

var player = document.getElementById('toAnimate').animate()

此時我們的 player 總共會有五種狀態："pending"、"paused"、"running"、"idle"、"finished"

console.log(player.playState);
// "pending"、"paused"、"running"、"idle"、"finished"

這五種狀態代表的意義如下，

  1. pending：播放或暫停即將發生時
  2. paused：暫停
  3. running：播放
  4. idel：初始
  5. finished：結束

除了 pending 之外，我們透過其餘方法可以改變動畫的狀態：

player.pause(); // "paused"
player.play();  // "running"
player.cancel(); // "idle"
player.finish(); // "finished"

還可以透過reverse()倒帶：

player.reverse();

以上算是 WAAPI 的入門介紹，另外附上一份控制元素移動、變形的 demo： 控制元素移動、變形

比較可惜的是，目前瀏覽器的支援還不夠完整（如下表），但是可先引入一份 polyfill 來彌補，所以也不需要太擔心！ 不過還是希望瀏覽器廠商們可以趕快補足WAAPI的支援啦，敲碗~~~~

參考資料

最後更新時間：