Flutter 每週尤物－第七週：FadeTransition

FadeTransition 便於製作元件的淡入與淡出動畫。

先建立動畫本身與動畫控制器。 

AnimationController 是控制動畫的持續時間，可用 duration 參數控制持續時間。

接著用 Tween 設定數值的變化，本案是示範逐漸顯示的效果，所以分別設定 0 和 1。

Animation 整合動畫功能。如上圖整合 Tween 和 AnimationController 後，也能依需求新增偵聽器（Listener）。

 

用 FadeTransition 這個 Widget 包裝要實作淡入動畫的 Widget。 

 

 

最後在 dispose() 方法中，釋放資源。

 

本例是一個包含 FlutterLogo 和一行文字的畫面，並新增一個浮動按鈕測試動畫。

最後記得呼叫 AnimationController.forward() 啟動動畫。 

執行結果如上。

版本資訊：

Flutter 2.9.0-1.0.pre.144 • channel master • https://github.com/flutter/flutter.git
Framework • revision 07a36f07e3 (3 months ago) • 2021-12-21 01:09:07 -0500
Engine • revision d3075cd085
Tools • Dart 2.16.0 (build 2.16.0-123.0.dev) • DevTools 2.9.1

文章更新資訊：

2022/03/08 - 更新 Flutter 版本，變更物始化說明。

完整範例