Contents

動畫效果介紹

Contents

Well-designed animations make a UI feel more intuitive, contribute to the slick look and feel of a polished app, and improve the user experience. Flutter’s animation support makes it easy to implement a variety of animation types. Many widgets, especially Material widgets, come with the standard motion effects defined in their design spec, but it’s also possible to customize these effects.

選擇一種實現方式

在 Flutter 中建立動畫可以有多種不同實現方式。那麼，究竟哪種才是最適合你的呢？為了幫助你更好的理解它，你可以觀看下面的影片， 如何在 Flutter 中選擇合適的動畫 Widget （同時也釋出了一篇 配套文章。）

（若想要深入瞭解它的決策流程，請觀看在 Flutter Europe 社群帳號釋出的 在 Flutter 中使用動畫的正確選擇）影片。

正如影片中說的那樣，下面的決策樹將幫助你挑選實現 Flutter 動畫的正確方式：

The animation decision tree

如果內建的隱含動畫（最簡單的動畫）已經能夠滿足你的需求，請觀看 隱含動畫基礎。（同時也釋出了一篇 配套文章。）

要建立一個自訂的隱含動畫，請觀看 使用 TweenAnimationBuilder 建立獨特的隱含動畫。（同時也釋出了一篇 配套文章。）

要建立顯式動畫（手動控制，而不是讓框架控制），你可以使用內建的其中一個顯式動畫類來實現。更多有關資訊，請觀看 使用內建顯式動畫。（同時也釋出了一篇 配套文章。）

如果你需要從頭開始建構顯式動畫，請觀看 透過 AnimatedBuilder 和 AnimatedWidget 建立一個自訂動畫。（同時也釋出了一篇配套文章。）

想要更深入的理解動畫在 Flutter 中的工作方式，請觀看 深入理解動畫。（同時也釋出了一篇 配套文章。）

Codelabs, 課程和文章

透過下面的資源可以很好的學習 Flutter 動畫框架。這些文件循序漸進地講解如何編寫動畫程式碼。

Animation types

動畫分為兩類：補間動畫和基於物理動畫。下面將解釋這些術語的含義，並幫助您找到更多相關資源。在一些情況下，我們現有的最佳文件是 Flutter gallery 中的範例程式碼。

補間動畫

補間動畫是“介於兩者之間”的縮寫。在補間動畫中，定義了起點和終點以及時間軸，再定義過渡時間和速度的曲線。然後框架會計算如何從起點過渡到終點。

上文列出的文件，比如 在 Flutter 應用裡實現動畫效果 並不是特別針對補間動畫的，但是其範例中使用了補間動畫。

基於物理基礎的動畫

在基於物理基礎的動畫中，動作是模擬真實世界的行為來進行建模的。舉個例子，當您拋球時，球落地的時間和位置取決於丟擲的速度和距離地面的高度。類似地，附在彈簧上的球和附在繩子上的球掉落（和反彈）方式是不一樣的。

預置動畫

如果你在使用 Material widgets，你也許想要看看 pub.dev 上的 animations package。這個 package 包含了以下內建常用模式： Container 變換、共享軸變化、漸變穿透和漸變變換。

常見動畫模式

大多數 UX 或動效設計師在設計 UI 時都會尋找主要動畫模式。本章的列表將介紹一些常見的動畫模式，並向你介紹更多學習它們的地方。

列表或網格動畫

這種模式用於在列表或網格中新增或刪除元素。

  • AnimatedList example
    這個來自 Sample app catalog 的示範展示了如何動態新增元素至列表或刪除選定元素。當用戶使用 plus (+) 和 minus (-) 按鈕修改列表時，會同步到內部 Dart 列表。

共享元素轉換

在這個模式中，使用者從頁面中選擇一個元素，通常是影象，然後 UI 會在新頁面中為指定元素新增動畫，並產生更多細節。在 Flutter 中，您可以透過 Hero widget 輕鬆實現路徑（頁面）間的共享元素轉換動畫。

  • Hero animations 如何建立兩種風格的 Hero 動畫：

    • 當改變位置和大小時，Hero 從一頁飛至另一頁。

    • Hero 的邊界改變形狀由圓變方，同時從一頁飛至另一頁。

  • Flutter Gallery
    您可以自己自己建立 Gallery 應用程式，或者到 Play 商店中下載。 Shrine 示範中有關於 Hero 動畫的範例。

  • 另請參閱 API 文件 Hero、Navigator 和 PageRoute 類別。

交織動畫

動畫被分解成較小的動作，其中一些動作被延遲。這些小動畫可以是連續的，也可以部分或完全重疊。

其他資源

以下連結可以瞭解更多 Flutter 動畫：