網頁動畫資源

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

背景

API 的核心會提供 Element.animate() 方法。我們來看看一個例子，當中顯示背景顏色從紅色到綠色

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

所有新式瀏覽器皆支援此方法，具有出色的 polyfill 備用項目 (詳情請參閱後續章節)。為此方法和播放器物件提供原生支援，已於 Chrome 39 中開放使用。此外，它也原生於 Opera 中提供，也正在 Firefox 積極開發。 這是功能強大的原始物件，應足以存放你的工具箱。

程式碼研究室

Web Animation API 適用的程式碼研究室越來越多，這些自修指南說明 API 的不同概念，可自行按照步調進行。在大部分的程式碼研究室中，您將擷取靜態內容，並使用動畫效果加以強化。

如果您想瞭解網路動畫中可用的新基本功能，不妨先從這些程式碼研究室和相關連結和資源著手。 如需構建建構方面的資訊，請參閱

所以，如果您才剛開始使用，那就放心吧！

試聽帶

如果你想要尋找靈感，請務必查看 GitHub 上託管於 Material 的 Web Animations Demos。這些示範了各種令人驚豔的效果，您可以透過內嵌的方式查看每個示範的原始碼。

這些示範內容包括彩色旋轉的銀河、旋轉地球，甚至是只對純舊元素套用各種效果。

聚合物

為確保所有新式瀏覽器都能提供完善支援，您可以使用 polyfill 程式庫。Web Animations API 現已提供 polyfill，讓所有新型瀏覽器都能使用，包括 Internet Explorer、Firefox 和 Safari。

如果您想冒險，可以使用網頁動畫的 polyfill，其中也包含尚未定案的功能 (例如可組合項 GroupEffect 和 SequenceEffect 建構函式)。如要比較兩種 polyfill，請參閱首頁。

如要在程式碼中使用 polyfill，可選擇幾種。

1. 使用 cdnjs、jsDelivr 等 CDN，或是透過 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 也撰寫了一系列有關網路動畫的文章，包括如何搭配使用新版 CSS motion-path 屬性。 如需使用 motion-path 的一些範例，請參閱 Eric Willigers 的文件。