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

去年底，我建構了 Chrome 開發人員高峰會網站。我希望網站具有質感設計的外觀和風格，因為這是很棒的設計語言，而且我覺得很適合我想要建立的網站類型。但就像任何新的設計語言一樣，您會遇到問題、挑戰，並需要做出決策，尤其是在處理網路慣例時。

建立網站時，最困難的部分之一就是點選資訊卡時的「接管」效果。

要讓這類效果以 60 FPS 執行，需要經過一些思考、原型設計和有趣的妥協。在 Chrome 開發人員高峰會上，我談到了這項效果，並詳細說明瞭我是如何建構這項效果。

建構高效能動畫

高效能動畫 (至少目前) 是指瀏覽器合成器偏好的動畫。如果能堅持變更轉換和不透明度屬性，通常就能獲得優異成效。我採用的一般卡片動畫方法就是這樣：

1. 在卡片摺疊時，測量卡片中所有元素的位置。
2. 切換資訊卡的類別，即可展開資訊卡 (不會有動畫效果)。
3. 現在資訊卡已展開，請重新測量資訊卡中元素的位置。
4. 計算差異。
5. 套用負轉換，將元素移回起始位置。
6. 開啟動畫。
7. 移除負轉換，並觀察元素在螢幕上飛到最終位置。

上述所有內容聽起來可能很耗費資源，但從使用者互動到動畫開始，有 100 毫秒的時間。如果超過這個時間，使用者就會感覺到延遲。您可以利用這段時間進行耗費資源的準備工作，以便在動畫本身執行期間降低成本。此外，大約 50 到 100 毫秒後會出現一個視窗，方便您進行整理工作，視您想執行的操作而定，這可能很有用。

動畫的昂貴工作是在前 100 毫秒內完成，在 Nexus 5 上，這項工作大約需要 70 毫秒，因此還有剩餘空間。

取得程式碼

如要進一步瞭解這個網站，我們很高興告訴您，程式碼已在 GitHub 上發布，歡迎前往查看！