動畫簡介

設計完善的動畫讓 UI 感覺更直覺,為精緻的應用程式增添流暢的外觀和感覺,並改善使用者體驗。Flutter 的動畫支援讓實作各種動畫類型變得容易。許多小工具,特別是 Material 小工具,都附有其設計規格中定義的標準動作效果,但也可以自訂這些效果。

選擇方法

在 Flutter 中建立動畫時,您可以採取不同的方法。哪種方法適合您?為了幫助您做出決定,請觀看影片 如何選擇適合您的 Flutter 動畫小工具?(也已發布為 配套文章。)

(若要深入了解決策流程,請觀看 Flutter 動畫正確執行 影片,此影片在 Flutter Europe 發表。)

正如影片所示,以下決策樹可協助您決定在實作 Flutter 動畫時要使用哪種方法

The animation decision tree

如果預先封裝的隱式動畫(最容易實作的動畫)符合您的需求,請觀看 使用隱式動畫的動畫基礎知識。(也已發布為 配套文章。)

了解使用隱式動畫的動畫基礎知識

若要建立自訂隱式動畫,請觀看 使用 TweenAnimationBuilder 建立您自己的自訂隱式動畫。(也已發布為 配套文章。)

了解使用 TweenAnimationBuilder 建立自訂隱式動畫

若要建立明確動畫(您控制動畫,而不是讓架構控制動畫),或許您可以使用其中一個內建的明確動畫類別。如需更多資訊,請觀看 使用內建的明確動畫製作您的第一個方向性動畫。(也已發布為 配套文章。)

如果您需要從頭開始建立明確動畫,請觀看 使用 AnimatedBuilder 和 AnimatedWidget 建立自訂明確動畫。(也已發布為 配套文章。)

要更深入了解動畫在 Flutter 中運作的方式,請觀看 動畫深入探討。(也已發布為 配套文章。)

Codelabs、教學課程和文章

以下資源是開始學習 Flutter 動畫架構的絕佳起點。這些文件各自說明如何撰寫動畫程式碼。

動畫類型

一般而言,動畫不是基於補間,就是基於物理。以下各節說明這些術語的意義,並提供您可以深入了解的資源。

補間動畫

中間動畫 的簡稱。在補間動畫中,定義開始和結束點,以及時間軸和定義過渡時間和速度的曲線。框架計算如何從開始點過渡到結束點。

上面列出的文件,例如 動畫教學,並非特別關於補間,但它們在範例中使用補間。

基於物理的動畫

在基於物理的動畫中,運動被建模為類似真實世界的行為。例如,當你拋球時,球的著陸位置和時間取決於拋球的速度以及球離地面的距離。類似地,將球附著在彈簧上時,球的掉落(和彈跳)方式與將球附著在繩子上時不同。

預先製作的動畫

如果你使用 Material 小工具,你可能會查看 pub.dev 上提供的 動畫套件。此套件包含針對下列常見模式預先建置的動畫:Container 轉換、共享軸轉換、淡入淡出轉換和淡出轉換。

常見動畫模式

大多數 UX 或動態設計師會發現,在設計 UI 時,某些動畫模式會重複使用。本節列出一些常用的動畫模式,並告訴您在哪裡可以深入了解。

動畫清單或網格

此模式涉及動畫加入或移除清單或網格中的元素。

  • AnimatedList 範例
    此範例來自 範例應用程式目錄,顯示如何動畫加入元素到清單,或移除已選取的元素。內部 Dart 清單會在使用者使用加號 (+) 和減號 (-) 按鈕修改清單時同步。

共用元素轉場

在此模式中,使用者從頁面中選取一個元素(通常是圖片),而 UI 會將選取的元素動畫到一個包含更多詳細資料的新頁面。在 Flutter 中,您可以使用 Hero 小工具,輕鬆地在路由(頁面)之間實作共用元素轉場。

  • Hero 動畫 如何建立兩種樣式的 Hero 動畫
    • Hero 從一個頁面飛到另一個頁面,同時改變位置和大小。
    • Hero 的邊界在從一個頁面飛到另一個頁面時,會從圓形變為方形。
  • 另請參閱 HeroNavigatorPageRoute 類別的 API 文件。

交錯動畫

將動畫分解成較小的動作,其中有些動作會延遲。較小的動畫可能是順序的,也可能是部分或完全重疊。

其他資源

透過下列連結進一步了解 Flutter 動畫