Flutter利用SizeTransition实现组件飞入效果
前言
继续 Transition 系列动画组件的介绍，本篇来介绍 SizeTransition。SizeTransition 用于更改子组件的尺寸来实现动画。支持垂直方向或水平方向修改动画，同时尺寸更改的起始位置可以从顶部、中部、底部（垂直方向）或左侧、中间、右侧（水平方向）开始。通过这些特性，我们可以构建组件飞入的效果。
SizeTransition 介绍
SizeTransition 的构造方法定义如下。
const SizeTransition({
Key? key,
this.axis = Axis.vertical,
required Animation<double> sizeFactor,
this.axisAlignment = 0.0,
this.child,
})
参数对应的说明如下：
axis：枚举，vertical 标识纵向更改组件尺寸，即更改组件高度；horizontal 表示横向更改组件尺寸，即更改组件宽度。
sizeFactor：即控制组件尺寸变化的 Animation 对象。实际上在动画过程中就是组件尺寸的宽度（horizontal）或高度（vertical）乘以**Animation**的值。
axisAlignment：即动画过程中，子组件的对齐位置，默认为0.0，是从中间开始更改尺寸；当axis为vertical时，-1.0代表顶部对齐开始动画（即尺寸从上到下开始变大）；当 axis 为horizontal 时，开始的方向和文本的反向有关（TextDirection.ltr 还是 TextDirection.rtl），当文本为从左到右时（TextDirection.ltr，默认），-1.0表示从左侧开始动画（即尺寸从左到右开始变大）。
应用
对于我们的飞入动画来说，我们要实现从左向右飞入动画效果，因此需要设置 axis 为水平方向，然后 axisAligment 为右侧。对于图片，找一个横向飞行的超人，然后加上动画后就可以实现超人飞入的效果了。完整源码如下：
class SizeTransitionDemo extends StatefulWidget {
SizeTransitionDemo({Key? key}) : super(key: key);
@override
_SizeTransitionDemoState createState() => _SizeTransitionDemoState();
}
class _SizeTransitionDemoState extends State<SizeTransitionDemo>
with SingleTickerProviderStateMixin {
late AnimationController _controller =
AnimationController(duration: const Duration(seconds: 3), vsync: this)
..repeat();
//使用自定义曲线动画过渡效果
late Animation<double> _animation = CurvedAnimation(
parent: _controller, curve: Curves.fastLinearToSlowEaseIn);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SizeTransition'),
brightness: Brightness.dark,
backgroundColor: Colors.blue,
),
body: SizeTransition(
child: Center(
child: Image.asset(
'images/superman.png',
width: 300.0,
height: 300.0,
),
),
sizeFactor: _animation,
axis: Axis.horizontal,
axisAlignment: 1.0,
),
);
}
@override
void dispose() {
_controller.stop();
_controller.dispose();
super.dispose();
}
}
使用 SizeTransition 实现其他动画效果
我们可以设置动画从中间开始，这样会有一种卷轴打开的效果，比如我们找一幅卷轴画来看看效果。
这个动画的实现代码如下：
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SizeTransition'),
brightness: Brightness.dark,
backgroundColor: Colors.blue,
),
body: Container(
alignment: Alignment.center,
child: SizeTransition(
child: Image.asset(
'images/juanzhou.png',
),
sizeFactor: _animation,
axis: Axis.horizontal,
axisAlignment: 0.0,
),
),
);
}总结
本篇介绍了使用 SizeTransition 控制组件尺寸更改来实现飞入或展开的动画效果。SizeTransition 也可以用于那种滑入滑出的动画场合，比如列表元素的插入使用下滑入，列表元素的删除使用上滑出。
以上就是Flutter利用SizeTransition实现组件飞入效果的详细内容，更多关于Flutter组件飞入的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Android截屏保存png图片的小例子，可以在应用提供这个小功能，很实用的2013-11-11
这篇文章主要介绍了RxJava操作符，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
角点就是极值点，即在某方面属性特别突出的点。当然，你可以自己定义角点的属性（设置特定熵值进行角点检测）。角点可以是两条线的交叉处，也可以是位于相邻的两个主要方向不同的事物上的点。本文介绍如何基于OpenCV实现Harris角点检测2021-06-06
这篇文章主要为大家详细介绍了Android实现朋友圈评论回复列表，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要为大家详细介绍了Android实现选择相册图片并显示功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-04-04
这篇文章主要介绍了android获取当前运行Activity名字的方法,对比分析了两种实现方法供大家选择,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了Flutter路由的几种用法,包括基本路由跳转和路由跳转传参方法，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-12-12
android http-post方法在开发中如何实现，具体代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-06-06
Android ListView position详解及实例代码
这篇文章主要介绍了Android ListView position的相关资料,在开发Android 应用的时候你真的用对了吗？这里给大家彻底解释下，需要的朋友可以参考下2016-10-10
这篇文章主要介绍了Android 序列化的存储和读取总结及简单使用的相关资料,Serializable接口和Parcelable接口，本文对这两种方式进行简单的总结和使用，需要的朋友可以参考下2016-12-12
最新评论