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,可選擇幾種。
使用 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 的文件。