【文章內容使用 Gemini 1.5 Pro 自動產生】
如何選擇適合您的 Flutter 動畫 Widget？
觀看此文章的影片版本，請點擊我們的 YouTube 影片。
此文章最初由 Emily Fortuna 撰寫，並由她授權發佈。
您決定在您的 Flutter 應用程式中加入動畫，真是太棒了！問題是，有許多不同的動畫 Widget，因此弄清楚哪一個最適合您可能會讓人不知所措。幸運的是，本文旨在提供幫助！
我將引導您完成一系列關於您心目中動畫的問題，以幫助您確定應該如何建立它。要記住的另一件事是，核心 Flutter 函式庫中提供的動畫 Widget 非常低階。這表示如果您心目中有一個複雜的動畫，我建議您查看 pub.dev 上提供更高階介面的動畫套件。
請查看下面的決策樹，我將在本文中解釋它：
廣泛來說，您可能希望在 Flutter 應用程式中加入兩種主要類型的動畫：繪圖型動畫和程式碼型動畫。
程式碼型動畫 以 Widget 為中心，根植於標準佈局和樣式原語，例如行、列、顏色或文字樣式。這並不表示它們很無聊或很簡單，但它們的核心往往是增強特定現有 Widget 的外觀或轉場，而不是作為獨立的 Widget 存在。
繪圖型動畫 相反，看起來像是有人畫出來的。它們通常是獨立的精靈，比如遊戲角色，或者涉及一些很難用純程式碼表達的轉換。
因此，您要問自己的第一個問題是：「我的動畫更像繪畫，還是更像是可以從 Flutter Widget 原語中構建出來的？」如果您的動畫更像繪畫，或者您與會提供向量或光柵圖像資產的設計團隊合作，那麼我建議您使用 Rive 或 Lottie 等第三方工具以圖形方式建立您的動畫，然後將其匯出到 Flutter。有幾個套件可以幫助您將這些資產加入到 Flutter 應用程式中。
否則，如果您的動畫涉及變更 Widget（例如變更顏色、形狀或位置），那麼您就可以撰寫一些 Flutter 程式碼！
明確或隱含？
Flutter 程式碼型動畫有兩種形式：隱含動畫和明確動畫。下一步是弄清楚您需要哪種類型。
隱含動畫依賴於簡單地為某些 Widget 屬性設定一個新值，然後 Flutter 會負責將其從當前值動畫到新值。這些 Widget 非常易於使用，並且非常強大。您上面看到的所有動畫都是使用隱含動畫 Widget 完成的。當您想要動畫化某個東西時，隱含動畫是一個很好的起點。
明確動畫需要一個 AnimationController。它們之所以被稱為「明確」，是因為它們只有在被明確要求時才會開始動畫。您可以使用明確動畫來完成使用隱含動畫所能完成的所有事情，再加上一些額外的事項。令人感到困擾的是，您必須手動管理 AnimationController 的生命週期，因為它不是一個 Widget，這意味著將它放在一個有狀態的 Widget 中。因此，如果您能使用隱含動畫 Widget，那麼您的程式碼通常會更簡單。
有三個問題可以幫助您確定需要哪種類型的 Widget：您的動畫是否永遠重複？我這裡的「永遠」是指在某個螢幕上，或者只要某個條件為真，例如音樂正在播放。
您要問自己的第二個問題是，您的動畫中的值是否是不連續的？我這裡的「不連續動畫」的範例是這個不斷增大的圓形動畫。圓形會重複地不斷變大變小、變大變小。它永遠不會變大變小，然後再縮小。在本例中，圓形的大小是不連續的。
您要問自己的最後一個問題是，多個 Widget 是否以協調的方式一起進行動畫？例如：
如果您對以上三個問題中的任何一個回答「是」，那麼您需要使用明確的 Widget。否則，您可以使用隱含的 Widget！在您決定是需要隱含的 Widget 還是明確的 Widget 之後，最後一個問題將引導您找到您需要的特定 Widget。
哪個 Widget？
問問自己，是否有符合我需求的內建 Widget？如果您正在尋找內建的隱含動畫 Widget，請搜索名為 AnimatedFoo 的 Widget，其中「Foo」是您想要動畫化的屬性，例如 AnimatedOpacity。此外，請查看 AnimatedContainer，因為它對於許多不同的隱含動畫來說是一個非常強大且通用的 Widget。
如果您找不到所需的內建隱含動畫，您可以使用 TweenAnimationBuilder 來建立自訂的隱含動畫。相反，如果您正在尋找內建的明確 Widget，它們通常被稱為 FooTransition，其中「Foo」是您正在動畫化的屬性，例如SlideTransition。
如果您找不到相關的內建明確動畫，還需要問自己最後一個問題：我是否希望我的動畫是一個獨立的 Widget，還是另一個周圍 Widget 的一部分？ 這個問題的答案主要取決於個人喜好。如果您想要一個獨立的自訂明確動畫，那麼您應該擴展 AnimatedWidget。否則，您可以使用 AnimatedBuilder。
如果您遇到效能問題，還有一個最後的選項需要考慮，那就是使用 CustomPainter 進行動畫。您可以像使用 AnimatedWidget 一樣使用它，但是 CustomPainter 會直接繪製到 Canvas 上，而不會使用標準的 Widget 建立範式。當您正確使用它時，您可以建立一些整潔的、極其自訂的效果，或者節省效能。不過，如果使用不當，您的動畫可能會導致更多效能問題。因此，請小心，就像手動記憶體管理一樣，請確保您了解自己在做什麼，然後再在任何地方都使用共用指標。
結語
總之，您可以問自己一系列高階問題，這些問題可以引導您如何建立動畫。這些問題的順序會形成一個決策樹，用於確定哪個 Widget 或套件適合您的需求。如果您將這些終點摺疊起來，它們會形成一條線，大約從左到右表示難度。感謝您的閱讀，祝您使用第三方框架或套件（明確或隱含地）建立出色的 Flutter 動畫！
如何選擇適合您的 Flutter 動畫 Widget？ 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。