文章目錄

• ?、AnimatedBuilder 引入
• 一、創建動畫控制器
• 二、創建動畫
• 三、創建動畫作用的組件
• 四、創建 AnimatedBuilder 關聯動畫與組件
• 五、動畫運行
• 六、完整代碼示例
• 七、相關資源

AnimatedBuilder 動畫使用流程 :

① 創建動畫控制器

② 創建動畫

③ 創建動畫作用的組件

④ 創建 AnimatedBuilder 關聯動畫與組件

⑤ 執行動畫

?、AnimatedBuilder 引入

---

在上一篇博客 【Flutter】Animation 動畫 ( AnimatedWidget 動畫使用流程 | 創建動畫控制器 | 創建動畫 | 創建 AnimatedWidget 動畫組件 | 動畫運行 ) 中 , 使用了 AnimatedWidget 組件實現動畫 , 省略了手動添加監聽器 , 并在監聽器中手動調用 setState 更新動畫的操作 ;

使用 AnimatedWidget 方法實現的動畫 , 與 Widget 組件的耦合性還是很高 , 這里引入 AnimatedBuilder , 可以將 Animation 動畫 和 Widget 組件分離 ;

AnimatedBuilder 可以構建通用 Widget , AnimatedBuilder 可以用于拆分動畫 與 組件 ;

動畫開發中需要分離的功能 :

• 顯示動畫作用的組件
• 定義 Animation 動畫對象
• 將 Animation 渲染到組件上

AnimatedBuilder 在監聽機制上與 AnimatedWidget 類似 , 也是自動添加監聽器 , 監聽動畫的執行過程 , 自動調用 setState 方法更新界面 ;

一、創建動畫控制器

---

AnimationController 構造函數參數說明 :

AnimationController({double? value, /// 動畫的初始值Duration? duration, /// 動畫正向播放持續時間Duration? reverseDuration, /// 動畫逆序播放持續時間String? debugLabel, /// 調試期間標識動畫的標志double lowerBound: 0.0, /// 動畫最小值double upperBound: 1.0, /// 動畫最大值 AnimationBehavior animationBehavior: AnimationBehavior.normal,/// 上下文的 TickerProvider , 用于防止屏幕外的動畫消耗不必要的資源 , /// 一般將 StatefulWidget 作為 vsync 值required TickerProvider vsync} )

上述參數中 , 只需要設置 required TickerProvider vsync 參數 與 Duration? duration 參數即可 ;

創建動畫控制器代碼示例 :

/// 1. 初始化動畫控制器animationController = AnimationController(// 動畫繪制到屏幕外部時, 減少消耗vsync: this,// 動畫持續時間 2 秒duration: Duration(seconds: 3),);

二、創建動畫

---

這里創建 Tween 補間動畫 , 設置動畫的初始值 $0$ , 結束值 $300$ , 動畫在執行的 $3$ 秒時間內 ( 動畫控制器中指定的動畫持續時間 ) , 自動計算出每個時間點的 $0$ ~ $300$ 之間的動畫值 ;

創建動畫代碼示例 :

/// 2 . 構造 Tween 補間動畫 ,/// 設置動畫控制器 AnimationController 給該補間動畫/// 動畫的值是正方形組件的寬高animation = Tween<double>(begin: 0,end: 300).animate(animationController)

三、創建動畫作用的組件

---

創建一個純無狀態組件 StatelessWidget , 該組件與 Animation 動畫對象各自都是獨立的 , 使用 AnimatedBuilder 耦合 動畫 與 組件 ;

代碼示例 :

/// 3 . 定義純組件, 動畫應用與該組件上 class AnimationWidget extends StatelessWidget{@overrideWidget build(BuildContext context) {return // 動畫的主體組件// 布局組件中使用動畫的值 , 以達到動畫效果Container(decoration: BoxDecoration(color: Colors.red),);} }

四、創建 AnimatedBuilder 關聯動畫與組件

---

創建 AnimatedBuilder , 關聯動畫與組件 ;

首先要把 AnimatedBuilder , Animation 動畫 , Widget 組件 , 都封裝在一個 StatelessWidget 組件中 , Flutter 中一切皆組件 ;

然后在這個組件中返回一個包含 AnimatedBuilder 組件的組件 , 其中將 Animation 動畫 和 Widget 組件都設置在該 AnimatedBuilder 中 , Animation 動畫設置在 animation 字段中 , child 字段需要設置到 build 字段中 , 設置的方法如下 :

AnimatedBuilder(animation: animation,builder: (context, child) => Container(height: animation.value,width: animation.value,child: child,),child: child,)

代碼示例 :

/// 4 . 將組件與動畫結合起來 class AnimationTransition extends StatelessWidget{/// 構造方法AnimationTransition({this.child, this.animation});/// 動畫作用的組件final Widget child;/// 動畫final Animation<double> animation;@overrideWidget build(BuildContext context) {/// AnimatedBuilder 會自動監聽 animation 的變化/// 然后渲染 child 組件上的動畫return Column(children: [Text("動畫狀態 : ${animation.status}", textDirection: TextDirection.ltr,),Text("動畫值 : ${animation.value?.round()}", textDirection: TextDirection.ltr,),Container(height: 50,),AnimatedBuilder(animation: animation,builder: (context, child) => Container(height: animation.value,width: animation.value,child: child,),child: child,)],);} }

五、動畫運行

---

監聽 GestureDetector 的 onTap 點擊事件 , 點擊該組件后 , 調用 animationController.forward() 方法 , 運行動畫 ;

代碼示例 :

GestureDetector(// 5 . 點擊按鈕開啟動畫onTap: (){/// 按鈕點擊事件/// 首先將動畫初始化animationController.reset();/// 正向執行動畫, 即從初始值執行到結束值animationController.forward();},child: Container(alignment: Alignment.center,color: Colors.green,height: 50,child: Text(// 顯示文本"動畫開始",/// 文字方向 : 從左到右textDirection: TextDirection.ltr,),),),

六、完整代碼示例

---

完整代碼示例 :

import 'package:flutter/material.dart';void main() {runApp(AnimationApp()); }/// 3 . 定義純組件, 動畫應用與該組件上 class AnimationWidget extends StatelessWidget{@overrideWidget build(BuildContext context) {return // 動畫的主體組件// 布局組件中使用動畫的值 , 以達到動畫效果Container(decoration: BoxDecoration(color: Colors.red),);} }/// 4 . 將組件與動畫結合起來 class AnimationTransition extends StatelessWidget{/// 構造方法AnimationTransition({this.child, this.animation});/// 動畫作用的組件final Widget child;/// 動畫final Animation<double> animation;@overrideWidget build(BuildContext context) {/// AnimatedBuilder 會自動監聽 animation 的變化/// 然后渲染 child 組件上的動畫return Column(children: [Text("動畫狀態 : ${animation.status}", textDirection: TextDirection.ltr,),Text("動畫值 : ${animation.value?.round()}", textDirection: TextDirection.ltr,),Container(height: 50,),AnimatedBuilder(animation: animation,builder: (context, child) => Container(height: animation.value,width: animation.value,child: child,),child: child,)],);} }/// 動畫示例主界面組件 /// 該組件是有狀態的, 因此需要定義 StatefulWidget 組件 class AnimationApp extends StatefulWidget{@override_AnimationAppState createState() => _AnimationAppState(); }/// 為 StatefulWidget 組件創建 State 類 /// 每個 StatefulWidget 都需要一個配套的 State 類 class _AnimationAppState extends State<AnimationApp>with SingleTickerProviderStateMixin{/// 動畫類Animation<double> animation;/// 動畫控制器AnimationController animationController;@overridevoid initState() {super.initState();/// 1. 初始化動畫控制器animationController = AnimationController(// 動畫繪制到屏幕外部時, 減少消耗vsync: this,// 動畫持續時間 2 秒duration: Duration(seconds: 3),);/// 2 . 構造 Tween 補間動畫 ,/// 設置動畫控制器 AnimationController 給該補間動畫/// 動畫的值是正方形組件的寬高animation = Tween<double>(begin: 0,end: 300).animate(animationController);}/// 該方法與 initState 對應@overridevoid dispose() {/// 釋放動畫控制器animationController.dispose();super.dispose();}@overrideWidget build(BuildContext context) {returnColumn(children: [Container(height: 50,),GestureDetector(// 5 . 點擊按鈕開啟動畫onTap: (){/// 按鈕點擊事件/// 首先將動畫初始化animationController.reset();/// 正向執行動畫, 即從初始值執行到結束值animationController.forward();},child: Container(alignment: Alignment.center,color: Colors.green,height: 50,child: Text(// 顯示文本"動畫開始",/// 文字方向 : 從左到右textDirection: TextDirection.ltr,),),),Container(height: 50,),AnimationTransition(animation: animation, child: AnimationWidget())],);}}

運行效果 : 動畫值不能更新 ;

七、相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
• GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510
• Flutter 實戰電子書 : https://book.flutterchina.club/chapter1/

重要的專題 :

• Flutter 動畫參考文檔 : https://flutterchina.club/animations/

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_animation ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/16188742 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。