動畫效果介紹

精心設計的動畫會使 UI 更生動，它有助於提升應用程式更精巧的外觀和感覺，從而改善使用者體驗。 Flutter 讓各種動畫效果的實現變得容易。在許多 widget 特別是 Material widgets 中，它們都自帶其設計規範中定義的標準動畫效果，當然，你也可以定製這些效果。

選擇一種實現方式

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

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

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

The animation decision tree

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

要建立一個自定義的隱式動畫，請觀看使用 TweenAnimationBuilder 建立獨特的隱式動畫。（同時也發布了一篇配套文章。）

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

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

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

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

動畫分為兩類：補間動畫和基於物理動畫。下面將解釋這些術語的含義，並幫助你找到更多相關資源。在一些情況下，我們現有的最佳文件是 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 的邊界改變形狀由圓變方，同時從一頁飛至另一頁。
另請參閱 API 文件 Hero、Navigator 和 PageRoute 類。

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

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