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 導入的網路動畫更接近實作其他瀏覽器的方式,且符合規範,也有助於簡化網頁內容編寫流程,讓互通性更佳。