Chrome 36 首次提供 Web Animations 的原生支援功能,並在 Chrome 39 中更新播放控制項。Element.animate()
方法可用於直接從 JavaScript 觸發命令式動畫,其傳回的物件可用於控制這些動畫的播放。這些方法的詳細說明,請參閱 Web Animations W3C 規格的現行草稿。
我們目前正在開發一項已發布的 polyfill,可追蹤所有原生實作的 Web Animations 功能,並支援所有新型瀏覽器。這些核心方法現已可供使用,而且值得納入您的工具箱,以便打造可從動畫 (例如 Google I/O 2015 網頁應用程式) 獲益的豐富體驗。
建構函式和群組變更
Web Animations 規格也說明瞭群組和序列,以及動畫和播放器的建構函式。這些功能已在 web-animations-next polyfill 中提供,該 polyfill 旨在展示仍在討論中,但尚未原生實作的功能。為了回應開發人員的意見回饋,開發 Web Animations 的團隊正在重新命名這些功能,讓名稱更容易理解。
FXTF 近期在澳洲雪梨開會,並討論 命名,因為許多開發人員提出有效的觀點,指出部分命名方式令人困惑。因此,我們同意以下名稱變更:
- Animation 會變成 KeyframeEffect
- AnimationSequence 會變成 SequenceEffect
- AnimationGroup 變成 GroupEffect
- AnimationPlayer 變成 Animation
請注意,雖然 Chrome 原生支援動畫和播放器,且為 polyfill 的一部分,但目前這些項目是直接透過 Element.animate()
方法建立。使用 Element.animate()
方法的現有程式碼不需要變更。
新名稱更能準確代表各個物件提供的行為。舉例來說,KeyframeEffect
會說明可指定 HTML 元素的關鍵影格效果。相反地,新的 Animation
物件代表動畫的其中一個狀態 (例如播放、暫停等)。
SourceCodeEffect
如果您是透過 web-animations-next polyfill 使用草稿規格,就必須在淘汰期內更新程式碼,以反映這些新名稱。根據polyfill 變更政策,我們會為舊版提供三個月的支援,並在您的網站使用已淘汰的功能或名稱時,提供控制台警告語句。
如果您想試用這些功能,請留意 polyfill 的 第 2 版,以便利用這些新名稱。最後,請務必訂閱 web-animations-changes 群組,以便瞭解其他變更。