【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )
文章目录
- 一、创建动画控制器
- 二、创建动画
- 三、设置值监听器
- 四、设置状态监听器
- 五、布局中使用动画值
- 六、动画运行
- 七、完整代码示例
- 八、相关资源
Flutter 动画基本流程 :
① 创建动画控制器
② 创建动画
③ 设置值监听器
④ 设置状态监听器
⑤ 布局中使用动画值
⑥ 动画运行
一、创建动画控制器
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}
)
上述参数中 , 只需要设置 required TickerProvider vsync
参数 与 Duration? duration
参数即可 ;
创建动画控制器代码示例 :
/// 1. 初始化动画控制器animationController = AnimationController(// 动画绘制到屏幕外部时, 减少消耗vsync: this,// 动画持续时间 2 秒duration: Duration(seconds: 3),);
二、创建动画
这里创建 Tween 补间动画 , 设置动画的初始值 000 , 结束值 300300300 , 动画在执行的 333 秒时间内 ( 动画控制器中指定的动画持续时间 ) , 自动计算出每个时间点的 000 ~ 300300300 之间的动画值 ;
创建动画代码示例 :
/// 2 . 构造 Tween 补间动画 ,/// 设置动画控制器 AnimationController 给该补间动画/// 动画的值是正方形组件的宽高animation = Tween<double>(begin: 0,end: 300).animate(animationController)
三、设置值监听器
调用 Animation 的 addListener 方法 , 可以为动画添加值监听器 ;
简洁用法 : 上一行代码表达式必须是 animation, 结尾不能有分号 , 之后可以使用 ..addListener
用法 , 该用法等价于 animation.addListener
;
setState 方法 : 动画如果生效, 必须在监听器中调用 setState 方法 , 以便重新调用 build 方法进行布局渲染 , 否则 UI 界面不会刷新 ;
" 设置值监听器 " 代码示例 :
/// 3 . 添加动画值监听器/// 该用法与 animation.addListener 效果是等价的/// 这种写法比较简洁/// 类似于链式调用, 上一行代码表达式必须是 animation, 结尾不能有分号/// 特别注意 : 动画如果生效, 必须在监听器中调用 setState 方法..addListener(() {/// 调用 setState 方法后, 更新相关状态值后, 自动调用 build 方法重构组件界面setState(() {// 获取动画执行过程中的值animationValue = animation.value;});})
四、设置状态监听器
调用 Animation 的 addStatusListener方法 , 可以为动画添加值监听器 ;
简洁用法 : 上一行代码表达式必须是 animation, 结尾不能有分号 , 之后可以使用 ..addStatusListener
用法 , 该用法等价于 animation.addStatusListener
;
setState 方法 : 动画如果生效, 必须在监听器中调用 setState 方法 , 以便重新调用 build 方法进行布局渲染 , 否则 UI 界面不会刷新 ;
" 设置状态监听器 " 代码示例 :
/// 4 . 添加动画状态监听器/// 设置动画状态监听器..addStatusListener((status) {/// 调用 setState 方法后, 更新相关状态值后, 自动调用 build 方法重构组件界面setState(() {/// 获取动画状态animationStatus = status;});});
五、布局中使用动画值
在 build 方法中返回的布局组件中 , 使用上述监听器中获取的动画值 animationValue , 该值是 000 ~ 300300300 之间的浮点数 ;
这里使用动画值作为正方形组件的宽高 ;
" 布局中使用动画值 " 代码示例 :
// 动画的主体组件// 6 . 布局组件中使用动画的值 , 以达到动画效果Container(/// 设置距离顶部 20 像素margin: EdgeInsets.only(top: 50),height: animationValue,width: animationValue,decoration: BoxDecoration(color: Colors.red),),
六、动画运行
监听 GestureDetector 的 onTap 点击事件 , 点击该组件后 , 调用 animationController.forward()
方法 , 运行动画 ;
代码示例 :
GestureDetector(// 5 . 点击按钮开启动画onTap: (){/// 按钮点击事件/// 首先将动画初始化animationController.reset();/// 正向执行动画, 即从初始值执行到结束值animationController.forward();},child: Container(alignment: Alignment.center,color: Colors.green,height: 50,child: Text(// 显示文本"动画开始",/// 文字方向 : 从左到右textDirection: TextDirection.ltr,),),),
七、完整代码示例
完整代码示例 :
import 'package:flutter/material.dart';void main() {runApp(AnimationApp());
}/// 动画示例主界面组件
/// 该组件是有状态的, 因此需要定义 StatefulWidget 组件
class AnimationApp extends StatefulWidget{@override_AnimationAppState createState() => _AnimationAppState();
}/// 为 StatefulWidget 组件创建 State 类
/// 每个 StatefulWidget 都需要一个配套的 State 类
class _AnimationAppState extends State<AnimationApp>with SingleTickerProviderStateMixin{/// 动画类Animation<double> animation;/// 动画控制器AnimationController animationController;/// 动画状态AnimationStatus animationStatus;/// 动画值/// 动画运行过程中, 动画计算出来的值double animationValue;@overridevoid initState() {super.initState();/// 1. 初始化动画控制器animationController = AnimationController(// 动画绘制到屏幕外部时, 减少消耗vsync: this,// 动画持续时间 2 秒duration: Duration(seconds: 3),);/// 2 . 构造 Tween 补间动画 ,/// 设置动画控制器 AnimationController 给该补间动画/// 动画的值是正方形组件的宽高animation = Tween<double>(begin: 0,end: 300).animate(animationController)/// 3 . 添加动画值监听器/// 该用法与 animation.addListener 效果是等价的/// 这种写法比较简洁/// 类似于链式调用, 上一行代码表达式必须是 animation, 结尾不能有分号/// 特别注意 : 动画如果生效, 必须在监听器中调用 setState 方法..addListener(() {/// 调用 setState 方法后, 更新相关状态值后, 自动调用 build 方法重构组件界面setState(() {// 获取动画执行过程中的值animationValue = animation.value;});})/// 4 . 添加动画状态监听器/// 设置动画状态监听器..addStatusListener((status) {/// 调用 setState 方法后, 更新相关状态值后, 自动调用 build 方法重构组件界面setState(() {/// 获取动画状态animationStatus = status;});});}/// 该方法与 initState 对应@overridevoid dispose() {/// 释放动画控制器animationController.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Container(/// 设置距离顶部 20 像素margin: EdgeInsets.only(top: 100),child: Column(children: [GestureDetector(// 5 . 点击按钮开启动画onTap: (){/// 按钮点击事件/// 首先将动画初始化animationController.reset();/// 正向执行动画, 即从初始值执行到结束值animationController.forward();},child: Container(alignment: Alignment.center,color: Colors.green,height: 50,child: Text(// 显示文本"动画开始",/// 文字方向 : 从左到右textDirection: TextDirection.ltr,),),),Text("动画状态 : $animationStatus", textDirection: TextDirection.ltr,),Text("动画值 : ${animationValue?.round()}", textDirection: TextDirection.ltr,),// 动画的主体组件// 6 . 布局组件中使用动画的值 , 以达到动画效果Container(/// 设置距离顶部 20 像素margin: EdgeInsets.only(top: 50),height: animationValue,width: animationValue,decoration: BoxDecoration(color: Colors.red),),],),);}}
运行效果 :
八、相关资源
参考资料 :
- 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_animation ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/16184811 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )相关推荐
- 第十四周项目一数组大折腾(1)创建一个有20个元素的整型数组,通过初始化,为数组中的前10个元素赋初值,然后通过键盘输入后10个元素的值,从前往后输出数组中元素的值,每五个元素
问题及代码 创建一个有20个元素的整型数组,通过初始化,为数组中的前10个元素赋初值,然后通过键盘输入后10个元素的值,从前往后输出数组中元素的值,每五个元素 换一行. /*烟台大学计算机学院 201 ...
- 【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )
文章目录 ◯.AnimatedBuilder 引入 一.创建动画控制器 二.创建动画 三.创建动画作用的组件 四.创建 AnimatedBuilder 关联动画与组件 五.动画运行 六.完整代码示例 ...
- 【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )
文章目录 ◯.AnimatedWidget 组件引入 一.创建 AnimatedWidget 动画组件 二.创建动画控制器 三.创建动画 四.动画运行 五.完整代码示例 六.相关资源 Animated ...
- 【Flutter】Hero 动画 ( Hero 动画使用流程 | 创建 Hero 动画核心组件 | 创建源页面 | 创建目的页面 | 页面跳转 )
文章目录 ◯.Hero 动画简介 一.创建 Hero 动画核心组件 二.创建源页面 三.创建目的页面 四.页面跳转 五.完整代码示例 六.相关资源 ◯.Hero 动画简介 Hero Widget 动画 ...
- 【Flutter】Animation 动画 ( Flutter 动画的核心类 | Animation | CurvedAnimation | AnimationController | Tween )
文章目录 一.动画的核心类 Animation 二.动画的核心类 CurvedAnimation 三.动画的核心类 AnimationController 四.动画的核心类 Tween 五.相关资源 ...
- 【Flutter】Animation 动画 ( Flutter 动画类型 | Flutter 动画的核心类 )
文章目录 一.Flutter 动画类型 二.Flutter 动画的核心类 三.相关资源 Flutter Animation 动画 : Flutter 动画类型 为 Widget 组件添加动画 为动画添 ...
- 谈一谈Flutter中的共享元素动画Hero
如果你是一名安卓开发者,应该很熟悉 共享元素变换(Shared Element Transition)这个概念,它可以通过几行代码,就在两个Activity或者Fragment之间做出流畅的转场动 ...
- Flutter开发日记——Flutter动画Motion Widget详解(下)
本篇文章已授权微信公众号 YYGeeker 独家发布转载请标明出处 AnimatedDefaultTextStyle 1.简介 AnimatedDefaultTextStyle控件表示一个具有变化文本 ...
- Flutter | 启动,渲染,setState 流程
前言 用了这么久 Flutter 了,居然都不知道他的启动过程,真的是学之有愧啊,今天我们来分析一下 Flutter 的启动流程,以及他的渲染过程,对其做一个简单的剖析. 启动流程 Flutter 的 ...
最新文章
- 插上翅膀,让Excel飞起来——xlwings(一)
- [LeetCode]Single Number II
- qt插件元数据不包含一个有效的元数据_qt creator源码全方面分析(2-10-2)
- 问题 1: 区间交集
- 纯css实现漂亮又健壮的tooltip
- 【操作系统】常见进程调度算法特点总结比较
- html toast屏幕中间,Toast.html
- labelme制作数据集:将标注好的json文件,转换成类似VOCdevkit数据集中的SegmentationClass(标注技巧)
- linux双系统安装教程
- Edxposed研究之Magisk源码下载编译的详细实战教程
- rpgmv存档修改html_使用HTML5存档网站内容更改
- 国庆高质量出行,可视化开启智慧旅游
- IT运维外包甩不掉的包袱
- 青岛科技大学计算机转专业,2021年青岛科技大学大一新生转专业及入学考试相关规定...
- SAP ADM100 学习笔记
- python提取html中的href标签,如何使用Python从HTML获取href链接?
- 网易云项目(Vue)
- 基于FMC接口的PCIEx8+FPGAXC7K325T+DDR3的3UVPX处理板
- 网际协议IP(计算机网络)
- 紫晶存储2017年上半年营收6012万元 净赚639万元