簡化網頁動畫的命名方式

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 變更政策,我們會為舊版提供三個月的支援,並在您的網站使用已淘汰的功能或名稱時,提供控制台警告語句。

如果您想試用這些功能,請留意 v2 版的 polyfill,以便利用這些新名稱。最後,請務必訂閱 web-animations-changes 群組,以便瞭解其他異動。