Flutter动画SizeTransition使用解析

志在巅峰的攀登者，不会陶醉在沿途的某个脚印之中，在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

在 Flutter 中，SizeTransition 可以理解为尺寸动画。

更多应用知识点，小编已总结在书中

手机点击查看
电脑点击查看

如果你有兴趣你可以关注一下公众号 biglead 来获取最新的学习资料。

Flutter 从入门到精通系列文章在这里
当然也必需是要有源码的在这里了
github 有点慢不妨来看看码云的源码吧
系列学习教程在这里

本文章实现的效果是

SizeTransition 简述

  const SizeTransition({Key? key,this.axis = Axis.vertical,required Animation<double> sizeFactor,this.axisAlignment = 0.0,this.child,})

sizeFactor：动画控制，例如 AnimationController
axis：表示动画出现的方式，分别是Axis.vertical和Axis.horizontal，垂直方向和横轴方向
axisAlignment：表示动画出现的原始位置偏移量，如果是在垂直方向指的是y，如果是横轴方向指的是x

本实例 Demo

测试页面入口

main() {runApp(MaterialApp(//不显示 debug标签debugShowCheckedModeBanner: false,//显示的首页面home: DemoSizeTransition(),));
}

然后就是 DemoSizeTransition如下：

  ///代码清单
class DemoSizeTransition extends StatefulWidget {@override_DemoSizeTransitionState createState() => _DemoSizeTransitionState();
}class _DemoSizeTransitionState extends State<DemoSizeTransition>with SingleTickerProviderStateMixin {late AnimationController _animationController;@overridevoid initState() {super.initState();_animationController =new AnimationController(vsync: this, duration: Duration(seconds: 1));}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("SizeTransition")),body: SizeTransition(//偏移量axisAlignment: 0.0,//动画控制sizeFactor: _animationController,axis: Axis.horizontal,child: buildContainer(),),floatingActionButton: FloatingActionButton(child: Text("开始"),onPressed: () {_animationController.forward(from: 0);},),);}Container buildContainer() {return Container(//子Widget 对齐方式alignment: Alignment.center,width: 300,//高度height: 200,//背景颜色color: Colors.blue,child: Text("早起的年轻人",style: TextStyle(color: Colors.white),),);}
}

Flutter动画SizeTransition使用解析相关推荐

史上最详细Flutter 动画讲解
1. 动画介绍动画对于App来说,非常的重要.很多App,正是因为有了动画,所以才会觉得炫酷.移动端的动画库有非常的多,例如iOS上的Pop.web端的animate.css.Android端的An ...
Flutter中使用flutter_html解析html文件
1. 安装插件配置 flutter_html 插件. dependencies:flutter:sdk: flutterflutter_localizations:sdk: flutterdate_ ...
【flutter 动画汇总】
Flutter动画一般由这几个部分组成 Animation AnimationController CurvedAnimation Tween1)Animation 是一个范型(T),是一个抽象类,可 ...
Flutter 动画学习
文章目录概念理解插值器/估值器 Flutter中的动画类型动画 Animation Tween (估值器给出范围的值) Tween 子类 AnimatedWidget 对于没有附加状态的简单情 ...
Flutter动画(全)
Flutter动画一.Flutter Api自带的动画部件. 二.学会图表和动画的结合. 三.结合自定义手势和自定义绘制来搞出各种炫酷的需求. 四.Flare动画 - 一 Flutter Api提供 ...
【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )
文章目录一.创建动画控制器二.创建动画三.设置值监听器四.设置状态监听器五.布局中使用动画值六.动画运行七.完整代码示例八.相关资源 Flutter 动画基本流程 : ① 创建动画控制 ...
【Flutter】Animation 动画 ( Flutter 动画的核心类 | Animation | CurvedAnimation | AnimationController | Tween )
文章目录一.动画的核心类 Animation 二.动画的核心类 CurvedAnimation 三.动画的核心类 AnimationController 四.动画的核心类 Tween 五.相关资源 ...
【Flutter】Animation 动画 ( Flutter 动画类型 | Flutter 动画的核心类 )
文章目录一.Flutter 动画类型二.Flutter 动画的核心类三.相关资源 Flutter Animation 动画 : Flutter 动画类型为 Widget 组件添加动画为动画添 ...
Flutter 路由源码解析
前言这一次,我尝试以不贴一行源代码的方式向你介绍 Flutter 路由的实现原理,同时为了提高你阅读源码的积极性,除了原理介绍以外,又补充了两个新的模块:从源码中学习到的编程技巧,以及阅读源码之后 ...

Flutter动画SizeTransition使用解析

SizeTransition 简述

本实例 Demo

Flutter动画SizeTransition使用解析相关推荐

最新文章

热门文章