【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 : 动画执行过程中计算出来的过渡值 ; 如旋转动画 , 计算出来的角度值是 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 ( 本篇博客的源码快照 , 可以找到本博客的源码 )