文章目錄

• 一、創(chuàng)建動(dòng)畫控制器
• 二、創(chuàng)建動(dòng)畫
• 三、設(shè)置值監(jiān)聽器
• 四、設(shè)置狀態(tài)監(jiān)聽器
• 五、布局中使用動(dòng)畫值
• 六、動(dòng)畫運(yùn)行
• 七、完整代碼示例
• 八、相關(guān)資源

Flutter 動(dòng)畫基本流程 :

① 創(chuàng)建動(dòng)畫控制器

② 創(chuàng)建動(dòng)畫

③ 設(shè)置值監(jiān)聽器

④ 設(shè)置狀態(tài)監(jiān)聽器

⑤ 布局中使用動(dòng)畫值

⑥ 動(dòng)畫運(yùn)行

一、創(chuàng)建動(dòng)畫控制器

---

AnimationController 構(gòu)造函數(shù)參數(shù)說明 :

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

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

創(chuàng)建動(dòng)畫控制器代碼示例 :

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

二、創(chuàng)建動(dòng)畫

---

這里創(chuàng)建 Tween 補(bǔ)間動(dòng)畫 , 設(shè)置動(dòng)畫的初始值 $0$ , 結(jié)束值 $300$ , 動(dòng)畫在執(zhí)行的 $3$ 秒時(shí)間內(nèi) ( 動(dòng)畫控制器中指定的動(dòng)畫持續(xù)時(shí)間 ) , 自動(dòng)計(jì)算出每個(gè)時(shí)間點(diǎn)的 $0$ ~ $300$ 之間的動(dòng)畫值 ;

創(chuàng)建動(dòng)畫代碼示例 :

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

三、設(shè)置值監(jiān)聽器

---

調(diào)用 Animation 的 addListener 方法 , 可以為動(dòng)畫添加值監(jiān)聽器 ;

簡(jiǎn)潔用法 : 上一行代碼表達(dá)式必須是 animation, 結(jié)尾不能有分號(hào) , 之后可以使用 ..addListener 用法 , 該用法等價(jià)于 animation.addListener ;

setState 方法 : 動(dòng)畫如果生效, 必須在監(jiān)聽器中調(diào)用 setState 方法 , 以便重新調(diào)用 build 方法進(jìn)行布局渲染 , 否則 UI 界面不會(huì)刷新 ;

" 設(shè)置值監(jiān)聽器 " 代碼示例 :

/// 3 . 添加動(dòng)畫值監(jiān)聽器/// 該用法與 animation.addListener 效果是等價(jià)的/// 這種寫法比較簡(jiǎn)潔/// 類似于鏈?zhǔn)秸{(diào)用, 上一行代碼表達(dá)式必須是 animation, 結(jié)尾不能有分號(hào)/// 特別注意 : 動(dòng)畫如果生效, 必須在監(jiān)聽器中調(diào)用 setState 方法..addListener(() {/// 調(diào)用 setState 方法后, 更新相關(guān)狀態(tài)值后, 自動(dòng)調(diào)用 build 方法重構(gòu)組件界面setState(() {// 獲取動(dòng)畫執(zhí)行過程中的值animationValue = animation.value;});})

四、設(shè)置狀態(tài)監(jiān)聽器

---

調(diào)用 Animation 的 addStatusListener方法 , 可以為動(dòng)畫添加值監(jiān)聽器 ;

簡(jiǎn)潔用法 : 上一行代碼表達(dá)式必須是 animation, 結(jié)尾不能有分號(hào) , 之后可以使用 ..addStatusListener 用法 , 該用法等價(jià)于 animation.addStatusListener ;

setState 方法 : 動(dòng)畫如果生效, 必須在監(jiān)聽器中調(diào)用 setState 方法 , 以便重新調(diào)用 build 方法進(jìn)行布局渲染 , 否則 UI 界面不會(huì)刷新 ;

" 設(shè)置狀態(tài)監(jiān)聽器 " 代碼示例 :

/// 4 . 添加動(dòng)畫狀態(tài)監(jiān)聽器/// 設(shè)置動(dòng)畫狀態(tài)監(jiān)聽器..addStatusListener((status) {/// 調(diào)用 setState 方法后, 更新相關(guān)狀態(tài)值后, 自動(dòng)調(diào)用 build 方法重構(gòu)組件界面setState(() {/// 獲取動(dòng)畫狀態(tài)animationStatus = status;});});

五、布局中使用動(dòng)畫值

---

在 build 方法中返回的布局組件中 , 使用上述監(jiān)聽器中獲取的動(dòng)畫值 animationValue , 該值是 $0$ ~ $300$ 之間的浮點(diǎn)數(shù) ;

這里使用動(dòng)畫值作為正方形組件的寬高 ;

" 布局中使用動(dòng)畫值 " 代碼示例 :

// 動(dòng)畫的主體組件// 6 . 布局組件中使用動(dòng)畫的值 , 以達(dá)到動(dòng)畫效果Container(/// 設(shè)置距離頂部 20 像素margin: EdgeInsets.only(top: 50),height: animationValue,width: animationValue,decoration: BoxDecoration(color: Colors.red),),

六、動(dòng)畫運(yùn)行

---

監(jiān)聽 GestureDetector 的 onTap 點(diǎn)擊事件 , 點(diǎn)擊該組件后 , 調(diào)用 animationController.forward() 方法 , 運(yùn)行動(dòng)畫 ;

代碼示例 :

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

七、完整代碼示例

---

完整代碼示例 :

import 'package:flutter/material.dart';void main() {runApp(AnimationApp()); }/// 動(dòng)畫示例主界面組件 /// 該組件是有狀態(tài)的, 因此需要定義 StatefulWidget 組件 class AnimationApp extends StatefulWidget{@override_AnimationAppState createState() => _AnimationAppState(); }/// 為 StatefulWidget 組件創(chuàng)建 State 類 /// 每個(gè) StatefulWidget 都需要一個(gè)配套的 State 類 class _AnimationAppState extends State<AnimationApp>with SingleTickerProviderStateMixin{/// 動(dòng)畫類Animation<double> animation;/// 動(dòng)畫控制器AnimationController animationController;/// 動(dòng)畫狀態(tài)AnimationStatus animationStatus;/// 動(dòng)畫值/// 動(dòng)畫運(yùn)行過程中, 動(dòng)畫計(jì)算出來的值double animationValue;@overridevoid initState() {super.initState();/// 1. 初始化動(dòng)畫控制器animationController = AnimationController(// 動(dòng)畫繪制到屏幕外部時(shí), 減少消耗vsync: this,// 動(dòng)畫持續(xù)時(shí)間 2 秒duration: Duration(seconds: 3),);/// 2 . 構(gòu)造 Tween 補(bǔ)間動(dòng)畫 ,/// 設(shè)置動(dòng)畫控制器 AnimationController 給該補(bǔ)間動(dòng)畫/// 動(dòng)畫的值是正方形組件的寬高animation = Tween<double>(begin: 0,end: 300).animate(animationController)/// 3 . 添加動(dòng)畫值監(jiān)聽器/// 該用法與 animation.addListener 效果是等價(jià)的/// 這種寫法比較簡(jiǎn)潔/// 類似于鏈?zhǔn)秸{(diào)用, 上一行代碼表達(dá)式必須是 animation, 結(jié)尾不能有分號(hào)/// 特別注意 : 動(dòng)畫如果生效, 必須在監(jiān)聽器中調(diào)用 setState 方法..addListener(() {/// 調(diào)用 setState 方法后, 更新相關(guān)狀態(tài)值后, 自動(dòng)調(diào)用 build 方法重構(gòu)組件界面setState(() {// 獲取動(dòng)畫執(zhí)行過程中的值animationValue = animation.value;});})/// 4 . 添加動(dòng)畫狀態(tài)監(jiān)聽器/// 設(shè)置動(dòng)畫狀態(tài)監(jiān)聽器..addStatusListener((status) {/// 調(diào)用 setState 方法后, 更新相關(guān)狀態(tài)值后, 自動(dòng)調(diào)用 build 方法重構(gòu)組件界面setState(() {/// 獲取動(dòng)畫狀態(tài)animationStatus = status;});});}/// 該方法與 initState 對(duì)應(yīng)@overridevoid dispose() {/// 釋放動(dòng)畫控制器animationController.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Container(/// 設(shè)置距離頂部 20 像素margin: EdgeInsets.only(top: 100),child: Column(children: [GestureDetector(// 5 . 點(diǎn)擊按鈕開啟動(dòng)畫onTap: (){/// 按鈕點(diǎn)擊事件/// 首先將動(dòng)畫初始化animationController.reset();/// 正向執(zhí)行動(dòng)畫, 即從初始值執(zhí)行到結(jié)束值animationController.forward();},child: Container(alignment: Alignment.center,color: Colors.green,height: 50,child: Text(// 顯示文本"動(dòng)畫開始",/// 文字方向 : 從左到右textDirection: TextDirection.ltr,),),),Text("動(dòng)畫狀態(tài) : $animationStatus", textDirection: TextDirection.ltr,),Text("動(dòng)畫值 : ${animationValue?.round()}", textDirection: TextDirection.ltr,),// 動(dòng)畫的主體組件// 6 . 布局組件中使用動(dòng)畫的值 , 以達(dá)到動(dòng)畫效果Container(/// 設(shè)置距離頂部 20 像素margin: EdgeInsets.only(top: 50),height: animationValue,width: animationValue,decoration: BoxDecoration(color: Colors.red),),],),);}}

運(yùn)行效果 :

八、相關(guān)資源

---

參考資料 :

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

重要的專題 :

• Flutter 動(dòng)畫參考文檔 : https://flutterchina.club/animations/

博客源碼下載 :

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

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

總結(jié)

以上是生活随笔為你收集整理的【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。