本頁面由 Cloud Translation API 翻譯而成。

網頁動畫資源

Sam Thorogood

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

背景

API 為核心提供 Element.animate() 方法。讓我們來看看一個從紅色到綠色的背景色彩動畫：

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

所有新式瀏覽器都支援這種方法，同時有絕佳的 polyfill 備用值 (稍後會詳細說明)。自 Chrome 39 版以來，我們已廣泛支援這個方法及其玩家物件。 Google Cloud SQL 也可直接使用 Opera，同時也正在針對 Firefox 進行積極開發。有了這款強大的原始功能，就有機會在工具箱中發揮一席之地。

程式碼研究室

越來越多的程式碼研究室適用於 Web Animations API。這些是自修指南，示範不同的 API 概念。在大部分這些程式碼研究室中，您將取得靜態內容，並利用動畫效果加以強化。

如要瞭解網頁動畫中可用的新基本功能，建議從這些程式碼研究室和相關連結或資源著手。如果想知道可以建構什麼內容，請查看這個 Android 啟發的公開特效。

如果您才剛開始起步，請盡力而為！

示範

如要尋找靈感，請務必查看 GitHub 上代管的來源，查看以 Material 為靈感的網路動畫示範。上述功能示範各種令人驚豔的效果，而且您可以透過內嵌方式查看每個示範的原始碼。

其中的內容包括彩色旋轉銀河系、旋轉地球，或甚至是純粹的舊元素各種效果。

聚合物

為了確保在所有新式瀏覽器中都能提供絕佳支援，我們可以使用 polyfill 程式庫。 Web Animations API 目前可提供 polyfill，可搭配 Internet Explorer、Firefox 和 Safari 等所有新型瀏覽器使用。

喜歡嘗鮮嗎？不妨使用網頁動畫的下一個 Polyfill，也可以利用其中一些尚未確定的功能，例如可組合的 GroupEffect 和 SequenceEffect 建構函式。如需兩種 polyfill 的比較，請參閱首頁。

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

使用 cdnjs、jsDelivr 等 CDN，或是透過 rawgit.com 指定特定版本。

透過 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文件。