文章目錄

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

一、動畫的核心類 Animation

---

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

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

Animation 是抽象類 , 其 與 UI 組件沒有產生直接聯系 , 內部封裝了當前值與狀態 ;

Animation 動畫中的 Animation 對象 與 UI 渲染沒有任何關系 ;

Animation 可以在一個時間區間內 , 依次產生一個區間值 , 在時間為橫軸 , 值為縱軸的坐標系中 , 時間-動畫值的二維圖像 可以是 線性直線 , 也可以是曲線 , 或其它映射 ;

Animation 控制方式 : 根據設置的動畫的控制方式 , 動畫可以正向運行 , 從初始值到結束值 , 也可以反向運行 , 從結束值到初始值 ;

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

二、動畫的核心類 CurvedAnimation

---

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

• 主要作用 : 將曲線應用于另一個動畫的動畫 ;

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

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

下面的代碼是將 AnimationController 創建的線性動畫 轉為非線性的曲線動畫的過程 ; 這里的線性 , 非線性指的是 在時間為橫軸 , 值為縱軸的坐標系中 , 時間-動畫值 的二維圖像是直線還是曲線 ;

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

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

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

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

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 功能 :

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

默認情況下 , AnimationController 在給定的動畫時間內 , 生成 $0.0$ ~ $1.0$ 區間內的值 , 每當設備刷新新的畫面幀時 , AnimationController 都會產生一個新值 , 一般情況下 FPS 值為 $60$ , 也就是畫面每秒刷新 $60$ 次 ;

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} )

AnimationController 常用方法 :

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

四、動畫的核心類 Tween

---

Tween : 動畫執行過程中計算出來的過渡值 ; 如旋轉動畫 , 計算出來的角度值是 $0$ ~ $360$ ;

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

Tween 標識動畫值的 開始值 和 結束值 之間的線性插值 ;

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

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

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

創建一個由 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);

五、相關資源

---

參考資料 :

• 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_image_widget ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

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

總結

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

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