網頁動畫資源

Sam Thorogood

Web Animations API 提供強大的基本元素，可從 JavaScript 描述命令式動畫，但這代表什麼意思？瞭解可用的資源，包括 Google 的示範和程式碼研究室。

背景

這項 API 的核心是提供 Element.animate() 方法。以下範例會將背景顏色從紅色動畫效果變更為綠色：

var player = document.body.animate(
    [{'background': 'red'}, {'background': 'green'}], 1000);

所有新式瀏覽器都支援這個方法，並提供出色的 Polyfill 後備機制 (稍後會詳細說明)。 這項方法及其播放器物件的原始支援功能，已在 Chrome 39 中廣泛推出。 Opera 也內建這項功能，Firefox 則仍在積極開發中。這項強大的基本功能值得加入工具箱。

程式碼研究室

我們提供越來越多 Web Animations API 程式碼研究室。這些是自學指南，說明 API 中的不同概念。 在這些程式碼研究室中，您大多會使用靜態內容，並透過動畫效果加以強化。

如果您想瞭解 Web 動畫中可用的新基元，這些程式碼研究室和相關連結或資源絕對是最佳起點。 如要瞭解可建構的內容，請查看這個 Android 風格的揭露效果：

程式碼研究室結果預覽

如果你才剛起步，這就是你需要的內容！

示範

如需靈感，請務必查看 Web Animations Demos，這些範例的原始碼託管於 GitHub，並採用 Material 風格。這些範例展示了各種令人驚豔的效果，您可以內嵌查看每個範例的原始碼。

這些範例包括色彩繽紛的旋轉星系、旋轉的地球，甚至是簡單的舊元素套用各種效果。

Polyfill

如要確保所有新式瀏覽器都能提供優質支援，可以使用 polyfill 程式庫。 Web Animations API 目前提供 Polyfill，可支援所有新式瀏覽器，包括 Internet Explorer、Firefox 和 Safari。

如果您想嘗試新功能，可以使用 web-animations-next 填補程式，其中也包含尚未完成的功能，例如可組合的 GroupEffect 和 SequenceEffect 建構函式。如要比較這兩個 Polyfill，請參閱首頁。

如要在程式碼中使用任一 Polyfill，可以採取下列幾種做法。

  1. 使用 CDN，例如 cdnjs、jsDelivr，或透過 rawgit.com 指定特定版本

  2. 使用 NPM 或 Bower 安裝

     $ npm install web-animations-js
 $ bower install web-animations-js
 ```

在所有情況下，您都可以在任何其他程式碼之前，在指令碼標記中加入 Polyfill，

<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
    document.body.animate([
    {'background': 'red'},
    {'background': 'green'}
    ], 1000);
</script>

其他資源

如要閱讀更深入的技術簡介，請參閱 W3C 規格。

Dan Wilson 也撰寫了一系列有關 Web Animations 的精彩文章，包括如何搭配新的 CSS motion-path 屬性使用。如要查看使用 motion-path 的範例，請參閱 Eric Willigers 的文件。