簡化網頁動畫的命名方式

網頁動畫原生支援首次於 Chrome 36 版推出,同時也在 Chrome 39 版更新了播放控制項。Element.animate() 方法可用來直接從 JavaScript 觸發命令式動畫,其傳回的物件可用來控制這些動畫的播放作業。如需這些方法的詳細說明,請參閱網路動畫 W3C 規格目前的草稿。

目前有在積極開發的「出貨的 polyfill」中,這個 API 會追蹤原生實作的所有 Web Animations 功能,且所有新版瀏覽器都支援這些功能。這些核心方法目前已可使用,我們在此應可提供一些使用的工具,協助您打造具有動畫效果的豐富體驗 (例如 2015 年 Google I/O 大會網頁應用程式)。

建構函式和群組變更

網頁動畫規格還說明群組和順序,以及動畫和播放器的建構函式。您可以在 web-animations-next 其中找到這些指令,藉此呈現仍在討論中,尚未以原生方式實作的功能。為因應開發人員的意見回饋,網頁動畫開發團隊重新命名這些功能,以便更清楚瞭解這些功能。

FXTF 最近在澳洲雪梨會面,並討論 naming,其中有不少開發人員針對一些名稱令人感到困惑的地方提出了有效論點。因此,我們同意下列名稱變更:

  • Animation 變成 KeyframeEffect
  • AnimationSequence 變成 SequenceEffect
  • AnimationGroup 變成 GroupEffect
  • AnimationPlayer 變成 Animation

請注意,雖然動畫和播放器為 Chrome 的原生提供,並做為 Polyfill 的一部分,目前則是直接透過 Element.animate() 方法建立。使用 Element.animate() 方法的現有程式碼無需變更。

新名稱可更準確地呈現每個物件所提供的行為。舉例來說,KeyframeEffect 將描述可指定 HTML 元素的主要畫面格式效果。相反地,新的 Animation 物件代表多種狀態的動畫 (例如播放、暫停等)。

SourceCodeEffect

如果您透過網頁動畫下一個 polyfill 使用草稿規格的部分內容,就必須在淘汰期限內更新程式碼以反映這些新名稱。根據 polyfill 變更政策,網站將支援舊版三個月,並在你的網站使用了已淘汰的功能或名稱時提供控制台警告聲明。

如果您想試用這些功能,請隨時注意 polyfill 的第 2 版,善用這些新名稱。最後,請務必訂閱 web-animations-changes 群組,以便掌握最新資訊。