閃爍的新網頁動畫引擎可推動 CSS 動畫和轉場效果

Alex Danilo

使用者期待在現代的多裝置使用者介面中,流暢地播放 60 FPS 的動畫。要透過網路目前的動畫基元達到水準,可不容易。幸好,我們正在 Chrome Canary 剛完成新的 Blink 動畫實作作業!

更棒的是,這個方法能夠簡化 Blink 的內部結構,並奠定在網頁動畫 1.0 規格中納入新 API 功能的基礎。

截至目前為止,CSS 動畫和 CSS 轉場效果是各自獨立的實作方式,但不一定可以同時播放。過去幾年來,瀏覽器實作人員持續合作打造新一代動畫模型,並支援同步處理、鏈結動畫以依序執行、前往動畫時間任意時間點,例如讓動畫改變速度、反向播放等等。] 最終,我們打造出 W3C 規格 Web Animations 1.0

Blink 團隊要將網頁動畫部署到全世界的第一步,就是將現有的 Blink CSS Animations/Transitions C++ 實作替換為 Web Animation 引擎。到目前達到這個里程碑時,我們希望盡可能讓更多開發人員確認未發生任何故障情形,更重要的是密切留意導入的進展,並告訴我們哪些方面好壞或需要改變。

接下來,我們將實作 API,可讓您透過 JavaScript 建立、修改及攔截動畫。API 的設計可讓動畫有效執行 (利用宣告式語意,以便 JavaScript 管理建立動畫,但將瀏覽器交給瀏覽器),同時向 JavaScript 開發人員提供完整的動畫控制項。

我們正在對提議的 API 提出有效意見回饋,以確保不遺漏任何有效動畫控制所需的功能。如同任何新功能,規格將持續改變,所以現在就是表達自己的看法的時候。最好是訂閱並提交郵寄清單 public-fx@w3.org (並將 [網路動畫] 放在主旨行中),讓大家注意到這個情形。

立即試用目前支援 CSS 動畫和轉場效果的新引擎,並將任何奇怪的內容張貼至 Chromium 錯誤追蹤程式,讓我們瞭解。

我們很高興能將新一代動畫功能導入 Blink 和調整功能,與 WebKitMozilla 等其他瀏覽器開發人員合作,他也致力導入這個新模型。