【Flutter】Animation 动画 ( Flutter 动画类型 | Flutter 动画的核心类 )
文章目錄
- 一、Flutter 動畫類型
- 二、Flutter 動畫的核心類
- 三、相關資源
Flutter Animation 動畫 :
- Flutter 動畫類型
- 為 Widget 組件添加動畫
- 為動畫添加監聽器
- AnimationWidget
- AnimationBuilder
- Hero 動畫
Flutter 動畫參考文檔 : https://flutterchina.club/animations/
一、Flutter 動畫類型
Flutter 動畫類型 :
① 補間動畫 ( Tween Animation ) : 定義動畫的 開始與結束的狀態 , 以及動畫運行的 時間曲線 , 由 Flutter 自動計算出動畫的整個過程 ;
② 物理動畫 : 該動畫 基于物理原理 , 運行機制與真實世界類似 ; 如從高處拋出球 , 根據高度 , 拋出速度 , 重力加速度計算球的運行曲線 ;
二、Flutter 動畫的核心類
1. Animation : Flutter 動畫最核心的類 , 用于生成動畫的中間過渡值 ;
- 組成 : Animation 動畫由值和狀態組成 ;
- 動畫值 : 該值就是動畫的執行過程中計算的值 , 該值可能會按照某種曲線變化 , 也可能單調變化 ;
- 動畫狀態 : 狀態標記當前的動畫的執行順序 ( 從到到尾 / 從尾到頭 ) ;
- 監聽 : 動畫的執行過程中可以添加監聽器 , 監聽動畫的執行狀態 ;
- 參考文檔 : https://api.flutter.dev/flutter/animation/Animation-class.html
2. CurvedAnimation : 繼承自 Animation , 可以將動畫過程計算成一個非線性的過程 ;
-
主要作用 : 將曲線應用于另一個動畫的動畫 ;
-
參考文檔 : https://api.flutter.dev/flutter/animation/CurvedAnimation-class.html
3. AnimationController : 繼承自 Animation , 用于 管理 Animation ;
- 參考文檔 : https://api.flutter.dev/flutter/animation/AnimationController-class.html
4. Tween : 動畫執行過程中計算出來的過渡值 ; 如旋轉動畫 , 計算出來的角度值是 000 ~ 360360360 ;
- 參考文檔 : https://api.flutter.dev/flutter/animation/Tween-class.html
三、相關資源
參考資料 :
- 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 动画类型 | Flutter 动画的核心类 )的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【Flutter】Icons 组件 (
- 下一篇: 【Flutter】Animation 动