Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

動畫

動畫是做出引人注目的網頁應用程式和網站的重要一部分。 使用者已變得會期望擁有高度回應性與互動式的使用者介面。 然而,您的介面的動畫處理過程,倒是不一定直接了當。 該動畫處理的目標物、時機,以及動畫應該採用哪一種操作感?

TL;DR

  • 使用動畫,做為為您專案加入活力的方法。
  • 動畫應支援使用者互動。
  • 注意要動畫處理哪些屬性;某些工作的成本比其他更昂貴!

選擇要動畫處理的合適項目

很棒的動畫可為您的使用者,多加一層享受和參與感。 您可以動畫處理幾乎任何您喜歡的項目,無論是寬度、高度、位置、顏色、背景,但您需要注意潛在的效能瓶頸,以及動畫會如何影響您應用程式的個性。 斷斷續續或選擇差勁的動畫可能會負面影響使用者體驗,所以動畫必須同時具高效能且適當。

使用動畫來支援互動

不要只是為了展現能力而動畫處理某個項目;這會惱怒使用者並讓人感到礙事。 反之,使用戰略放置的動畫,以 強化 使用者互動。 如果使用者點選功能表圖示,請從頁面側邊射出功能表,或如果他們點擊一個按鈕,也許要使用微光或彈跳來確認互動。 注意要避免動畫非必要中斷或阻礙使用者活動。

避免動畫處理高成本的屬性

唯一比置放位置差勁的動畫更糟糕的是會造成頁面斷斷續續的動畫。 這會讓使用者感到失望和不滿,可能會希望您一開始就不必費心動畫處理任何東西!

某些屬性的變更較為高成本,因此更容易造成斷斷續續。 因此,變更元素的 box-shadow,將需要比變更文字顏色更高成本的繪製作業。 變更元素的 width 可能會比變更其 transform 更高成本。

您可以在 動畫和效能 指南中閱讀更多關於動畫效能的考量;但如果您想要 TL;DR,請堅守變形和透明度變更,並善用 will-change。 如果您想要知道究竟哪些工作會因動畫處理特定屬性而觸發,請查看 CSS 觸發器