跳至主要內容

隱式動畫

透過 Flutter 的 動畫函式庫,您可以為 UI 中的 Widget 加入動態效果並建立視覺特效。函式庫的一部分是一系列為您管理動畫的 Widget。這些 Widget 統稱為隱式動畫,或隱式動畫 Widget,其名稱源自於它們所實作的 ImplicitlyAnimatedWidget 類別。以下資源提供許多學習 Flutter 中隱式動畫的方式。

文件

#
隱式動畫程式碼實驗室
直接進入程式碼!此程式碼實驗室使用互動式範例和逐步說明,教您如何使用隱式動畫。
AnimatedContainer 範例
來自 Flutter Cookbook 的逐步指南,說明如何使用 AnimatedContainer 隱式動畫 Widget。
ImplicitlyAnimatedWidget API 頁面
所有隱式動畫都擴展自 ImplicitlyAnimatedWidget 類別。

Flutter in Focus 影片

#

Flutter in Focus 影片提供 5-10 分鐘的教學,其中包含真實程式碼,涵蓋每個 Flutter 開發者都應從頭到尾了解的技術。以下影片涵蓋與隱式動畫相關的主題。


Flutter 隱式動畫基礎


使用 TweenAnimationBuilder 建立自訂隱式動畫

The Boring Show

#

觀看 The Boring Show,跟隨 Google 工程師使用 Flutter 從頭開始建立應用程式。以下這集涵蓋在新聞聚合應用程式中使用隱式動畫。


將隱式動畫新增至新聞應用程式

Widget of the Week 影片

#

每週播放一系列簡短的動畫影片,每個影片都展示一個特定 Widget 的重要功能。大約在 60 秒內,您將看到每個 Widget 的真實程式碼,以及它如何運作的示範。以下 Widget of the Week 影片涵蓋了隱式動畫 Widget


了解 AnimatedOpacity Flutter Widget


了解 AnimatedPadding Flutter Widget


了解 AnimatedPositioned Flutter Widget


了解 AnimatedSwitcher Flutter Widget