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 啟發的公開特效。
![程式碼研究室結果預覽](https://developer.chrome.google.cn/static/docs/css-ui/web-animations-resources/image/preview-codelab-result-100183277695d.gif?authuser=19&hl=zh-tw)
如果您才剛開始起步,請盡力而為!
示範
如要尋找靈感,請務必查看 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文件。