去年年底，我建立了 Chrome 開發人員高峰會網站，我想擁有 Material Design 的外觀和風格，因為這是很棒的設計語言，而且我認為它非常適合想要建立的網站。不過，就像新的設計語言一樣，在處理網路常規時必須面對的問題、挑戰和決策，尤其需要留意。
網站上出現特別困難的環節之一，就是當使用者按下資訊卡時，會出現「接管」效果。
要在以 60fps 執行這類效果，需要經過一些思維、設計原型，以及一些有趣的妥協。在 Chrome 開發人員高峰會中，我曾詢問過這項效應，並詳細說明如何建構這個模型。
建構高效能動畫
高效能動畫，現今至少包括偏好瀏覽器合成器的動畫。如果您可以維持轉換和不透明度屬性，通常展現更出色的效能。我採用資訊卡動畫的一般做法如下：
- 在資訊卡收合時，測量資訊卡中所有元素的位置。
- 切換資訊卡的類別，即可展開資訊卡 (沒有動畫效果)。
- 資訊卡展開時，重新測量資訊卡中元素的位置。
- 計算差異。
- 套用負變轉換，將元素移回起始位置。
- 開啟動畫。
- 移除負轉換器，讓元素在畫面上隨著最終位置顯示。
這一切都聽起來可能相當昂貴，但從使用者互動開始，到動畫必須開始播放前，有 100 毫秒的時段才會出現。假如超過這個時間，使用者會感受到延遲。您可以利用這個時間執行昂貴的預備工作，讓動畫本身的執行成本更低廉。在大約 50 到 100 毫秒的結尾，有一個可整理作業的視窗。視你想進行的操作而定，這個視窗可能會很實用。
這時候，製作動畫通常在 100 毫秒內就要完成，而在 Nexus 5 上，工作則會在 70 毫秒的地區進行，因此還有一些備用空間。
取得程式碼
如果您有興趣進一步瞭解網站，我們很高興得知您已在 GitHub 上發布程式碼，歡迎查看！