【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )
文章目录
- ◯、AnimatedWidget 组件引入
- 一、创建 AnimatedWidget 动画组件
- 二、创建动画控制器
- 三、创建动画
- 四、动画运行
- 五、完整代码示例
- 六、相关资源
AnimatedWidget 动画使用流程 :
① 创建 AnimatedWidget 动画组件
② 创建动画控制器
③ 创建动画
④ 动画运行
◯、AnimatedWidget 组件引入
在上一篇博客 【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 ) 中 , 使用动画时 , 需要给动画添加值监听器 , 每当动画值更新后 , 都会回调该监听器 , 在监听器的回调方法中 , 需要调用 setState 方法 , 将该动画值设置给组件 ;
上面的操作很繁琐 , 需要注册监听器 , 获取动画值 , 然后将动画值设置给组件 ;
使用 AnimatedWidget 组件 , 可以直接实现上述操作 ;
AnimatedWidget 组件 可以极大简化 Flutter 中动画的使用 , 不使用 AnimatedWidget 的话 , 需要手动添加监听器 , 并在监听器中手动调用 setState 更新动画 ;
一、创建 AnimatedWidget 动画组件
AnimatedWidget 动画组件中封装了 Animation 动画对象 , 可以自动计算出动画值 , 并自动刷新封装在该 AnimatedWidget 动画组件中的布局组件 ;
创建 AnimatedWidget 动画组件时 , 传入 Animation 对象 ;
" AnimatedWidget 动画组件 " 代码示例 : 在组件刷新时 , 每次刷新都要调用该组件的 build 方法 , 这里使用 Text 组件显示动画的状态和值 , 并绘制动画作用的组件 Container , Container 组件的宽高就是动画值 , 随着动画值改变 , 该组件的宽高会增加 ;
/// 1. 定义动画组件, 动画的组件封装在该组件中
/// 使用 AnimatedWidget 快速实现一个动画
class AnimatedApp extends AnimatedWidget{/// 构造函数AnimatedApp({Key key, Animation<double> animation}):super(key: key, listenable: animation);@overrideWidget build(BuildContext context) {/// 获取动画Animation<double> animation = listenable;return Column(children: [Text("动画状态 : ${animation.status}", textDirection: TextDirection.ltr,),Text("动画值 : ${animation.value.round()}", textDirection: TextDirection.ltr,),// 动画的主体组件// 布局组件中使用动画的值 , 以达到动画效果Container(/// 设置距离顶部 20 像素margin: EdgeInsets.only(top: 50),height: animation.value,width: animation.value,decoration: BoxDecoration(color: Colors.red),),],);}
}
二、创建动画控制器
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)
四、动画运行
监听 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());
}/// 1. 定义动画组件, 动画的组件封装在该组件中
/// 使用 AnimatedWidget 快速实现一个动画
class AnimatedApp extends AnimatedWidget{/// 构造函数AnimatedApp({Key key, Animation<double> animation}):super(key: key, listenable: animation);@overrideWidget build(BuildContext context) {/// 获取动画Animation<double> animation = listenable;return Column(children: [Text("动画状态 : ${animation.status}", textDirection: TextDirection.ltr,),Text("动画值 : ${animation.value.round()}", textDirection: TextDirection.ltr,),// 动画的主体组件// 布局组件中使用动画的值 , 以达到动画效果Container(/// 设置距离顶部 20 像素margin: EdgeInsets.only(top: 50),height: animation.value,width: animation.value,decoration: BoxDecoration(color: Colors.red),),],);}
}/// 动画示例主界面组件
/// 该组件是有状态的, 因此需要定义 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;@overridevoid initState() {super.initState();/// 2. 初始化动画控制器animationController = AnimationController(// 动画绘制到屏幕外部时, 减少消耗vsync: this,// 动画持续时间 2 秒duration: Duration(seconds: 3),);/// 3 . 构造 Tween 补间动画 ,/// 设置动画控制器 AnimationController 给该补间动画/// 动画的值是正方形组件的宽高animation = Tween<double>(begin: 0,end: 300).animate(animationController);}/// 该方法与 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,),),),// 动画的主体组件// 4 . 创建动画组件, 传入动画对象 animationAnimatedApp(animation: animation,),],),);}}
运行效果 :
六、相关资源
参考资料 :
- 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/16184761 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )相关推荐
- 三维动画制作的基本流程
三维动画制作的基本流程是:前期的策划,中期的制作,后期的合成,三部分相有机结合.下面以一个流程图表现说明三维动画的详细制作流程: 场景建模 角色建模 动画动作设定 ↓ ↓ ↓ 固定做骨 ← SETUP ...
- 【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )
文章目录 ◯.AnimatedBuilder 引入 一.创建动画控制器 二.创建动画 三.创建动画作用的组件 四.创建 AnimatedBuilder 关联动画与组件 五.动画运行 六.完整代码示例 ...
- fiash星空动画制作_三维动画制作的详细流程
三维动画制作的详细流程: 随着互联网的发展,三维动画技术更新,三维动画制作技术在生活中运用十分广泛,我们经常在一些电视广告,影视电影中会看到一些三维特效,因为震撼的真实感很受大众喜欢.三维动画技术让视 ...
- maya扇子动画_maya变形金刚全流程动画教学(永久有效)
简介 专业类别:CG影视动画 授课方式:在线视频+互动答疑+作业点评 使用软件:Autodesk maya.Adobe premiere [完整教程在线视频地址在文章末尾] 课程主要面向所有 ...
- android view交替动画,Android View原理(View树遍历,View重绘,View动画)
一.屏幕绘图基础 Android中的GUI系统是客户端和服务端配合的窗口系统,即后台运行了一个绘制服务,每个应用程序都是该服务端的一个客户端,当客户端需要绘制时,首先请求服务端创建一个窗口,然后在窗口 ...
- layui导入 加载动画_厉害了!这个免费神器帮你无脑做施工动画
你好,这里是 BIMBOX.今天诚意给你安利一款好用免费的施工动画软件. 很多施工企业在建完模型后,都会用模拟动画的形式展示施工方案流程.做施工方案可视化评审.质量安全交底等.施工模拟动画这两年也成 ...
- python 动画场景_Python GUI教程(十五):在PyQt5中使用动画
QT作为一个全面的桌面应用程序开发包,其自然提供了对图像的动画支持.本篇文章中,就来简单地在PYQt5中使用Animation动画功能. 本篇将会依次完成以下功能: 在GUI界面中显示一个图片(用一个 ...
- svg配合css3动画_带有Adobe Illustrator,HTML和CSS的任何网站的SVG动画
svg配合css3动画 A top trend in web design for 2020 is the increased use of SVG animations on web pages a ...
- 不会做动画的程序猿不是好的动画师(如何用css3动画做动画)
"看清animation,transform, @keyframes,transition这四个的脸,以后这四个来了就是要做动画了,看好你们的网页,除了这四个,谁管你们都不好使." ...
最新文章
- android gradle 目录,Android Gradle:将目录列入文件
- VMware View 5.0从菜鸟到高手系列 3 -安装View Composer组件篇
- 【模板】并查集 两种路径压缩写法(类模板和函数模板)
- 2016蓝桥杯省赛---java---B---2(生日蜡烛)
- Cloud Native 介绍
- 记录---基于BigDecimal的特殊的四舍五入
- Chrome DevTools的Network面板
- c++调用子进程捕获输出(windows,linux)
- 如何从JavaScript中删除数组中的元素?
- 以算法岗为例:我最想对入职前的自己说些什么?
- php获取并删除数组的第一个和最后一个元素
- Winform界面中实现通用工具栏按钮的事件处理
- 什么是java cdm_Java-ORM数据库框架CDM介绍
- 如何做好会员营销 三步教你看懂会员管理
- java 6面骰子_java 垒骰子
- MTK芯片处理器对比资料图
- android分屏模式_Android分屏显示总结
- SDLC开发过程:基于DevSecOps理念的解决方案
- Ardupilot chibios IO固件,IO与FMU通信,固件下载(3)
- 使用expression design制作silverlight LOGO那种烟雾效果教程(翻译)
热门文章
- 简述模块-random
- iOS APP日志写入文件(日志收集)
- 20162309单步追踪数组及查找课下补分博客
- 20145226《信息安全系统设计基础》第1周学习总结
- Atitit.播放系统的选片服务器,包厢记时系统 的说明,教程,维护,故障排查手册p825...
- 树莓派(Raspberry Pi)修改时区
- Java--23种设计模式之decorator模式
- IE6Bug,外层container设置了overflow:auto,但是内层嵌套元素有position:relative的时候,显示错误。...
- 清除右键菜单CMD入口
- 日报 18/06/04