2 min read

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

Table of Contents

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

我們先來看一下基本功

基本用法:

element.animate(keyframes, timing);

只有短短一行。

keyframestiming 是 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、執行次數……等

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

See the Pen Web Animations API demo by Rex Tsou (@akccakcctw) on CodePen.

進階用法

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

我們延續基本用法,定義一個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: 控制元素移動、變形

See the Pen Web Animations API demo 2 by Rex Tsou (@akccakcctw) on CodePen.

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

參考資料