文章目錄

• 一、動畫的核心類 Animation
• 二、動畫的核心類 CurvedAnimation
• 三、動畫的核心類 AnimationController
• 四、動畫的核心類 Tween
• 五、相關(guān)資源

一、動畫的核心類 Animation

---

Animation : Flutter 動畫最核心的類 , 用于生成動畫的中間過渡值 ;

• 組成 : Animation 動畫由值和狀態(tài)組成 ;
• 動畫值 : 該值就是動畫的執(zhí)行過程中計(jì)算的值 , 該值可能會按照某種曲線變化 , 也可能單調(diào)變化 ;
• 動畫狀態(tài) : 狀態(tài)標(biāo)記當(dāng)前的動畫的執(zhí)行順序 ( 從到到尾 / 從尾到頭 ) ;
• 監(jiān)聽 : 動畫的執(zhí)行過程中可以添加監(jiān)聽器 , 監(jiān)聽動畫的執(zhí)行狀態(tài) ;
• 參考文檔 : https://api.flutter.dev/flutter/animation/Animation-class.html

Animation 是抽象類 , 其 與 UI 組件沒有產(chǎn)生直接聯(lián)系 , 內(nèi)部封裝了當(dāng)前值與狀態(tài) ;

Animation 動畫中的 Animation 對象 與 UI 渲染沒有任何關(guān)系 ;

Animation 可以在一個(gè)時(shí)間區(qū)間內(nèi) , 依次產(chǎn)生一個(gè)區(qū)間值 , 在時(shí)間為橫軸 , 值為縱軸的坐標(biāo)系中 , 時(shí)間-動畫值的二維圖像 可以是 線性直線 , 也可以是曲線 , 或其它映射 ;

Animation 控制方式 : 根據(jù)設(shè)置的動畫的控制方式 , 動畫可以正向運(yùn)行 , 從初始值到結(jié)束值 , 也可以反向運(yùn)行 , 從結(jié)束值到初始值 ;

Animation 生成值類型 : Animation 可以生成 Double 類型的值 ( Animation<double> ) , 也可以生成 Color ( Animation<Color> ) , Size ( Animation<Size> ) 等類型的值 ;

二、動畫的核心類 CurvedAnimation

---

CurvedAnimation : 繼承自 Animation , 可以將動畫過程計(jì)算成一個(gè)非線性的過程 ;

• 主要作用 : 將曲線應(yīng)用于另一個(gè)動畫的動畫 ;

• 參考文檔 : https://api.flutter.dev/flutter/animation/CurvedAnimation-class.html

CurvedAnimation 將動畫制作成非線性的曲線動畫 , 即 時(shí)間-動畫值 的二維圖像是曲線 ;

下面的代碼是將 AnimationController 創(chuàng)建的線性動畫 轉(zhuǎn)為非線性的曲線動畫的過程 ; 這里的線性 , 非線性指的是 在時(shí)間為橫軸 , 值為縱軸的坐標(biāo)系中 , 時(shí)間-動畫值 的二維圖像是直線還是曲線 ;

final Animation<double> animation = CurvedAnimation(parent: controller,curve: Curves.ease, );

動畫執(zhí)行有兩個(gè)方向 , 正向執(zhí)行 ( 從初始值到結(jié)束值 ) , 反向執(zhí)行 ( 從結(jié)束值到初始值 ) , 這兩個(gè)方向可以各自設(shè)置不同的曲線 ;

final Animation<double> animation = CurvedAnimation(parent: controller,curve: Curves.easeIn,reverseCurve: Curves.easeOut, );

自定義曲線 : 根據(jù)正弦函數(shù)以及傳入的參數(shù)值生成的曲線動畫值 ;

class SinCurve extends Curve {@overridedouble transform(double t) {return math.sin(t * math.PI * 2);} }

三、動畫的核心類 AnimationController

---

AnimationController : 繼承自 Animation , 用于 管理 Animation ;

• 參考文檔 : https://api.flutter.dev/flutter/animation/AnimationController-class.html

AnimationController 是動畫控制器 ;

AnimationController 功能 :

• 播放動畫 : 正向 ( 從初始值到結(jié)束值 ) 播放動畫 , 逆向 ( 從結(jié)束值到初始值 ) 播放動畫 , 停止動畫 ;
• 設(shè)置動畫值 : 給動畫設(shè)置一個(gè)特定值 ;
• 定義動畫區(qū)間 : 定義動畫值的最大值與最小值 , 如旋轉(zhuǎn)角度定義為 $0$ ~ $360$ ;
• 物理引擎 : 使用物理引擎創(chuàng)建一個(gè)投擲動畫 ;

默認(rèn)情況下 , AnimationController 在給定的動畫時(shí)間內(nèi) , 生成 $0.0$ ~ $1.0$ 區(qū)間內(nèi)的值 , 每當(dāng)設(shè)備刷新新的畫面幀時(shí) , AnimationController 都會產(chǎn)生一個(gè)新值 , 一般情況下 FPS 值為 $60$ , 也就是畫面每秒刷新 $60$ 次 ;

AnimationController 構(gòu)造函數(shù) : 每個(gè)字段的作用都在下面的注釋中 ;

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

AnimationController 常用方法 :

• 啟動動畫 : forward({double? from}) → TickerFuture
• 逆序播放 : reverse({double? from}) → TickerFuture
• 重置動畫 : reset() → void
• 停止動畫 : stop({bool canceled: true}) → void

四、動畫的核心類 Tween

---

Tween : 動畫執(zhí)行過程中計(jì)算出來的過渡值 ; 如旋轉(zhuǎn)動畫 , 計(jì)算出來的角度值是 $0$ ~ $360$ ;

• 參考文檔 : https://api.flutter.dev/flutter/animation/Tween-class.html

Tween 標(biāo)識動畫值的 開始值 和 結(jié)束值 之間的線性插值 ;

如果需要在指定的范圍內(nèi)差值 , 就必須使用 Tween ;

在動畫中使用 Tween 對象 , 調(diào)用 Tween 對象的 animate 方法 , 將要修改的 Animation 動畫傳給該方法 ;

多個(gè) Tween 對象鏈接 : 可以使用 chain 方法將多個(gè) Tween 對象鏈接在一次 , 這樣一個(gè)動畫對象可以配置多個(gè) Tween 對象 ; 這與調(diào)用 Tween 對象的 animate 方法多次效果是不同的 ;

創(chuàng)建一個(gè)由 AnimationController _controller 控制的動畫 Animation<Offset> , 有兩種方式 :

方式一 :

_animation = _controller.drive(Tween<Offset>(begin: const Offset(100.0, 50.0),end: const Offset(200.0, 300.0),), );

方式二 :

_animation = Tween<Offset>(begin: const Offset(100.0, 50.0),end: const Offset(200.0, 300.0), ).animate(_controller);

五、相關(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 動畫參考文檔 : https://flutterchina.club/animations/

博客源碼下載 :

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

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

總結(jié)

以上是生活随笔為你收集整理的【Flutter】Animation 动画 ( Flutter 动画的核心类 | Animation | CurvedAnimation | AnimationController | Tween )的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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