2014 年 Chrome 開發人員高峰會 - 執行階段效能應用科學

Paul Lewis

資訊卡接管效果

我去年年底建立了 Chrome 開發人員高峰會網站。我想採用質感設計的外觀與風格,因為這是絕佳的設計語言,且我覺得它非常適合我想要建立的網站類型。然而,與任何新的設計語言一樣,需要面對的問題、挑戰和決策存在,尤其是在應對網路慣例時。

網站的其中某個面向特別棘手,那就是使用者點選資訊卡後,就會出現「接管」效果。

為了讓影片以 60fps 運作,需要經過一些思考、設計原型,以及一些有趣的妥協。在 Chrome 開發人員高峰會上,我深入瞭解這個現象,並詳細說明瞭如何建構這項功能。

建構高效能動畫

高效能動畫,至少是偏好瀏覽器合成器的動畫。如果您可以持續變更轉換和不透明度的屬性,通常就能帶來不錯的成效。我對資訊卡動畫的一般做法正好可以:

  1. 測量資訊卡中所有元素在收合時的位置。
  2. 切換資訊卡的類別,即可展開資訊卡 (不含動畫)。
  3. 重新測量資訊卡中元素在資訊卡展開的位置。
  4. 計算差異。
  5. 套用負變轉換,將元素移回起始位置。
  6. 開啟動畫。
  7. 移除負變轉換,觀察元素在畫面上的最終位置一目了然。

這些操作聽起來可能很昂貴,但從使用者進行互動的那一刻起,會有 100 毫秒的空窗期,而動畫必須開始開始播放。如果超過這個時間,使用者就會感到延遲。因此,您可以使用這段時間執行昂貴的預備工作,以便在動畫過程中以更低的價格執行。此外,在約 50 至 100 毫秒的結尾還有一個視窗,可以協助整理工作,視您想執行的操作而定。

動畫的感知視窗。

動畫的製作時間通常在前 100 毫秒內,而 Nexus 5 則這項作業會在 70 毫秒的地區完成,因此還有餘裕。

取得程式碼

如果您有興趣進一步瞭解這個網站,歡迎聽到程式碼已在 GitHub 上發布,歡迎前往查看!