文章目录
- 一、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 : 动画执行过程中计算出来的过渡值 ; 如旋转动画 , 计算出来的角度值是 0 ~ 360 ;
- 参考文档 : 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 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
