Flutter AnimatedSwitcher 动画切换组件的基本使用

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

【x1】微信公众号的每日提醒随时随记每日积累随心而过

【x2】各种系列的视频教程免费开源关注你不会迷路

【x3】系列文章百万 Demo 随时复制粘贴使用

AnimatedSwitcher组件用来执行动画组件的切换功能，如 A 的缩小 B 的放大，通过AnimatedSwitcher组件可以很巧妙的结合在一起。

本文最终执行效果如下图所示：

1 AnimatedSwitcher 构造函数属性说明

const AnimatedSwitcher({Key key,this.child,@required this.duration, // 新child显示动画时长this.reverseDuration,// 旧child隐藏的动画时长this.switchInCurve = Curves.linear, // 新child显示的动画曲线this.switchOutCurve = Curves.linear,// 旧child隐藏的动画曲线this.transitionBuilder = AnimatedSwitcher.defaultTransitionBuilder, // 动画构建器this.layoutBuilder = AnimatedSwitcher.defaultLayoutBuilder, //布局构建器
})

2 AnimatedSwitcher 核心使用方法

///AnimatedSwitcher 的基本使用AnimatedSwitcher buildAnimatedSwitcher(BuildContext context) {return AnimatedSwitcher(///动画执行切换时间duration: const Duration(milliseconds: 600),///动画构建器 构建指定动画类型transitionBuilder: (Widget child, Animation<double> animation) {//执行缩放动画return ScaleTransition(child: child, scale: animation);},///执行动画的子 Widget///只有子 Widget 被切换时才会触发动画child: Text('$_count',//显示指定key，不同的key会被认为是不同的Textkey: ValueKey<int>(_count),style: TextStyle(fontSize: 22),),);}

当这里使用到的 _count 变量值更新并刷新页面时，可触发动画效果，如点击一个按钮，修改 _count 的值如下代码：

///构建一个有边框的按钮 OutlineButton buildOutlineButton() {return OutlineButton(child: const Text('数据递增',),onPressed: () {print(("count $_count"));setState(() {_count += 1;});},);}

完毕

当然微信公众号如果你有兴趣可以关注一下，每日分享不在话下。

Flutter AnimatedSwitcher 动画切换组件的基本使用相关推荐

Flutter AnimatedSwitcher 实现优美的图片切换动画
志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的 ...
Flutter AnimatedSwitcher 实现的滑动切换数字动画效果
优美的应用体验来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维,不局限于思维,不局限语言限制,才是编程的最高境界. 本文章实现的效果如下图所示: 在这里定义一个Timer ...
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )
文章目录 ◯.AnimatedBuilder 引入一.创建动画控制器二.创建动画三.创建动画作用的组件四.创建 AnimatedBuilder 关联动画与组件五.动画运行六.完整代码示例 ...
Flutter Hero动画让你的APP页面切换充满动效不一样的体验不一样的细节处理
优美的应用体验来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维. 本文章实现的Demo效果,如下图所示: 1 首先是页面的主体在这里使用的是Scaffold脚手架来构建 ...
个人技术总结——Unity中角色动画制作及动画切换逻辑的实现
这个作业属于哪个课程软件工程实践2022春-F班这个作业要求在哪里软件工程实践总结&个人技术博客这个作业的目标课程回顾与总结+个人技术总结其他参考文献 <Unity2018教 ...
【Unity笔记】连招动画切换方式（一）
连招动画切换方式(一) 此方法可以实现的连击效果: 通过连续点击鼠标左键攻击1 接攻击2 接攻击3 结束在任意攻击动作中停止点击鼠标左键,则连击中断一.Animator中的设置先将一套连招 ...
Unity -- Animation（旧版动画组件）和Animator(新版动画器组件)
旧版animation动画器组件如果想让一个游戏物体具有动画表现的话,我们需要给这个游戏物体挂载动画组件和音频组件视频组件一样,如果想在游戏对象上播放动画效果的话我们需要挂载一个动画组件,然后再给 ...
Flutter 开关和切换高级指南
我们都熟悉家用开关来打开和关闭我们的照明系统和其他电器. 我们也熟悉切换按钮: 如果您家里有电炊具或电磁炉,您可以在其电压和烹饪功能之间切换. 同样,我们的移动应用程序也有开关和拨动开关来打开/关闭 ...
react路由动画切换（react 路由动画）
1.react过渡效果 1.1 在react项目中下载安装过渡动画模块 cnpm install react-transition-group --save 1.2 在需要执行过渡的组件中导入动画模块 ...

Flutter AnimatedSwitcher 动画切换组件的基本使用

1 AnimatedSwitcher 构造函数属性说明

2 AnimatedSwitcher 核心使用方法

Flutter AnimatedSwitcher 动画切换组件的基本使用相关推荐

最新文章

热门文章