改善 Chrome 50 的網路動畫效能

Alex Danilo

Chrome 36 最初推出的 Web Animations API,可為瀏覽器中的動畫提供便利的 JavaScript 控制項,並同時在 Gecko 和 WebKit 中實作。

Chrome 50 推出了多項變更,改善與其他瀏覽器的互通性,並更加符合規格。這些異動包括:

  • 取消活動
  • Animation.id
  • pause() 方法的狀態變更
  • 淘汰主要畫面格中的虛線名稱鍵

在 Chrome 51 版中,下列部分變更已完成:

  • 移除主要畫面格中的虛線名稱

取消活動

動畫介面提供一個有趣的取消動畫的方法,稱為 cancel()。Chrome 50 會在根據規格呼叫方法時實作取消事件,如果方法初始化,Chrome 50 就會透過 oncancel 屬性觸發事件處理作業。

支援 Animation.id

使用 element.animate() 建立動畫時,您可以傳入多種屬性。以下範例說明如何為物件設定不透明度動畫:

element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);

透過指定 id 屬性,系統會在傳回的 Animation 物件上設定該屬性,這可協助您處理許多要處理的 Animation 物件,協助內容偵錯。以下範例說明如何為要例項的動畫指定 id

element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});

Pause() 方法的狀態變更

pause() 方法可用來暫停進行中的動畫。如果使用 playState 屬性檢查動畫的狀態,應在呼叫 paused() 方法後將其設為 paused。在 Chrome 50 以下版本中,playState 屬性會指出 idle,如果動畫尚未開始,但可以反映 paused 的正確狀態。

移除主要畫面格中的虛線名稱

為進一步遵守規格和其他實作方式,如果在主要畫面格動畫中使用虛線名稱,Chrome 50 會向控制台傳送警示。要使用的正確字串是駝峰式命名,就如同 CSS 屬性與 IDL 屬性轉換演算法一樣。

舉例來說,CSS 屬性 margin-left 會要求您傳入 marginLeft 做為鍵。

Chrome 51 版完全移除對虛線名稱的支援,因此現在是按照規格修正任何現有內容並使用正確命名的好時機。

摘要

這些變更可讓 Chrome 導入的網路動畫更接近實作其他瀏覽器的方式,且符合規範,也有助於簡化網頁內容編寫流程,讓互通性更佳。