flutter常用内置动画组件
文章目录
PositionedTransition/RelativePositionedTransition
----------------------------------------------------------------
AnimatedContainer
属性改变, 根据设定的时间过渡大小颜色位移等, 类似transition
属性变化的动画
GestureDetector(
onTap: () {
setState(() {
widget.width = 100.0;
});
},
child: AnimatedContainer(
duration: Duration(seconds: 2),
width: widget.width,
height: 200.0,
color: Colors.red,
child: Text('test'),
padding: EdgeInsets.only(bottom: 100.0),
curve: Curves.bounceOut,
),
)
AnimatedCrossFade
一个widget，在两个孩子之间交叉淡入，并同时调整他们的尺寸, firstChild 在一定时间逐渐变成 secondChild
整个元素变化的动画
AnimatedCrossFade(
firstChild: Container(
width: 100.0,
height: 100.0,
color: Colors.green,
child: Text('123'),
),
secondChild: Container(
width: 200.0,
height: 100.0,
color: Colors.red,
child: Text('456'),
),
crossFadeState: widget.first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
duration: Duration(seconds: 2)
)
Hero
https://flutterchina.club/animations/hero-animations/
AnimatedBuilder
AnimatedBuilder
用于构建动画的通用小部件。
用它包裹可以实现根据animation变化而变化的动画
AnimatedBuilder(
animation: animation2,
builder: (BuildContext ctx, Widget child) {
return Container(
transform:
Matrix4.translationValues(0, animation2.value, 0),
alignment: Alignment.topLeft,
padding: EdgeInsets.fromLTRB(40.0, 30.0, 40.0, 0.0),
child: Column(
children: <Widget>[
Container(
alignment: Alignment.topLeft,
child: Text(
'我是标题',
style: TextStyle(fontSize: 18.0),
),
),
Container(
padding: EdgeInsets.only(top: 10.0),
alignment: Alignment.topLeft,
child: Text('我是内容啦啦啦啦'),
)
],
),
);
},
)
DecoratedBoxTransition
DecoratedBox的动画版本，可以给它的Decoration不同属性使用动画
针对Decoration的属性变化的动画
Animation<Decoration> animationTest;
AnimationController controllerTest; controllerTest = new AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this); animationTest = DecorationTween(
begin: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(0.0)),
color: Colors.red
),
end: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
color: Colors.green
)
).animate(controllerTest); DecoratedBoxTransition(
decoration: animationTest,
child: Container(
width: 100.0,
height: 100.0,
)
)
FadeTransition
对透明度使用动画的widget
透明度的包装动画, 比直接用Opacity封装简单, 不如AnimatedOpacity方便
Animation<double> animationTest;
AnimationController controllerTest; controllerTest = new AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this);
animationTest = new Tween(begin: 1.0, end: 0.0).animate(controllerTest); FadeTransition(
opacity: animationTest,
child: Container(
width: 100.0,
height: 100.0,
decoration: BoxDecoration(
color: Colors.red,
border: Border.all(color: Colors.green, width: 10.0),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
)
)
PositionedTransition/RelativePositionedTransition
Positioned的动画版本，它需要一个特定的动画来将孩子的位置从动画的生命周期的起始位置移到结束位置。
绝对定位的动画实现, 需要Stack包裹
Animation<RelativeRect> animationTest;
AnimationController controllerTest; controllerTest = new AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this); animationTest = RelativeRectTween(
begin: RelativeRect.fromLTRB(200.0, 200.0, 200.0, 200.0),
end: RelativeRect.fromLTRB(20.0, 20.0, 20.0, 20.0))
.animate(controllerTest); Stack(children: <Widget>[
PositionedTransition(
rect: animationTest,
child: GestureDetector(
onTap: () {
controllerTest.forward();
},
child: Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),
),
)
]),
RotationTransition
对widget使用旋转动画
1.0 = 360度
RotationTransition(
turns: new Tween(begin: 0.0, end: 0.5).animate(controllerTest),
child: Container(
width: 100.0,
height: 100.0,
color: Colors.red,
child: Text('12345678'),
)
)
ScaleTransition
对widget使用缩放动画
1.0为初始
ScaleTransition(
scale: new Tween(begin: 1.0, end: 0.5).animate(controllerTest),
child: Container(
width: 100.0,
height: 100.0,
color: Colors.red,
child: Text('12345678'),
)
)
AlignTransition
挪到中间
SizeTransition
宽度或者高度缩放
重点是axis控制的, 百叶窗效果可实现
SizeTransition(
axis: Axis.horizontal, //控制宽度或者高度缩放
sizeFactor:
new Tween(begin: 1.0, end: 0.5).animate(controllerTest),
child: Container(
width: 100.0,
height: 100.0,
color: Colors.red,
child: Text('12345678'),
)
)
SlideTransition
对相对于其正常位置的某个位置之间使用动画
Offset是相对于自己移动的百分比
SlideTransition(
position: new Tween(
begin: Offset(0.0, 0.0),
end: Offset(0.5, 0.3),
).animate(controllerTest),
child: Container(
width: 100.0,
height: 100.0,
color: Colors.red,
child: Text('12345678'),
)
)
AnimatedDefaultTextStyle
在文本样式切换时使用动画
AnimatedDefaultTextStyle(child: Text('1234567'), style: TextStyle(
color: widget.color
), duration: Duration(seconds: 2)
)
AnimatedListState
动画列表的state
AnimatedListdemo用
AnimatedModalBarrier
一个阻止用户与widget交互的widget
AnimatedOpacity
Opacity的动画版本，在给定的透明度变化时，自动地在给定的一段时间内改变孩子的Opacity
AnimatedOpacity(
opacity: widget.opacity,
duration: Duration(seconds: 2),
child: Container(
width: 100.0,
height: 100.0,
color: Colors.black,
)
)
AnimatedPhysicalModel
PhysicalModel的动画版本
阴影动画
AnimatedPhysicalModel(
duration: Duration(seconds: 2),
shape: BoxShape.rectangle,
elevation: 20.0,
color: Colors.transparent,
shadowColor: widget.color,
child: Container(
width: 100.0,
height: 100.0,
color: Colors.black,
)
)
AnimatedPositioned
动画版本的Positioned，每当给定位置的变化，自动在给定的时间内转换孩子的位置。
相对于PositionedTransition简单一些, 但是功能相对单一
Stack(children: <Widget>[
AnimatedPositioned(
width: widget.width,
duration: Duration(seconds: 2),
child: GestureDetector(
onTap: (){ setState(() {
widget.width = 100.0;
});
},
child: Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),
)
)
]),
AnimatedSize
动画widget，当给定的孩子的大小变化时，它自动地在给定时间内转换它的大小。
AnimatedWidget
当给定的Listenable改变值时，会重新构建该widget
AnimatedWidgetBaseState
具有隐式动画的widget的基类
原文地址： https://blog.csdn.net/weixin_43929882/article/details/88531433
flutter常用内置动画组件的更多相关文章
- Flutter学习笔记（36）--常用内置动画
如需转载,请注明出处:Flutter学习笔记(36)--常用内置动画 Flutter给我们提供了很多而且很好用的内置动画,这些动画仅仅需要简单的几行代码就可以实现一些不错的效果,Flutter的动画分 ...
- MYSQL常用内置函数详解说明
函数中可以将字段名当作变量来用,变量的值就是该列对应的所有值:在整理98在线字典数据时(http://zidian.98zw.com/),有这要一个需求,想从多音字duoyinzi字段值提取第一个拼音 ...
- request.setCharacterEncoding 和常用内置对象 跳转
1.直接转码 new String(name.getBytes("ISO8859_1"),"GBK") 2. request.setCharactorEncod ...
- JavaScript常用内置对象（window、document、form对象）
由于刚开始学习B/S编程,下面对各种脚本语言有一个宏观的简单认识. 脚本语言(JavaScript,Vbscript,JScript等)介于HTML和C,C++,Java,C#等编程语言之间.它的优势 ...
- ASP.NET常用内置对象
ASP.NET 常用内置对象:Response对象.Request对象.Session对象.Server对象.Application对象 1.Response对象: (1) 用于向浏览器输出信息 常用 ...
- Python常用模块中常用内置函数的具体介绍
Python作为计算机语言中常用的语言,它具有十分强大的功能,但是你知道Python常用模块I的内置模块中常用内置函数都包括哪些具体的函数吗?以下的文章就是对Python常用模块I的内置模块的常用内置 ...
- python字符串常用内置方法
python字符串常用内置方法 定义: 字符串是一个有序的字符的集合,用与存储和表示基本的文本信息. python中引号中间包含的就是字符串. # s1='hello world' # s2=&quo ...
- MySQL学习笔记_7_MySQL常用内置函数
MySQL常用内置函数 说明: 1)可以用在SELECT/UPDATE/DELETE中,及where,orderby,having中 2)在函数里将字段名作为参数,变量的值就是字段所对应的每一行的值. ...
- Tomcat的常用内置对象
Tomcat的常用内置对象 1.request内置对象 所谓内置对象就是容器已经创建好了的对象,如果收到一个用户的请求就会自动创建一个对象来处理客户端发送的一些信息,这个内置对象就是request.类 ...
随机推荐
- windows连接远程服务器报错'SSH' 不是内部或外部命令，也不是可运行的程序 或批处理文件 解决方案
网上在windows下连接远程服务器的步骤如下: 1.打开cmd命令行窗口 2.输入cd ~/.ssh,进入c盘下的.ssh文件 3.输入“ssh root@远程服务器的ip地址”连接远程服务器, b ...
- 如何对Linux内核参数进行优化？
打开配置文件 vi /etc/sysctl.conf 输入配置,如下是内核优化的参数 # TCP三次握手建立阶段接收SYN请求队列的最大长度,默认为1024(将其设置得大一些可以使出现Nginx繁忙来 ...
- Linux安装配置go运行环境
1. 下载go,解压 gz包 wget https://storage.googleapis.com/golang/go1.7.5.linux-amd64.tar.gz tar zxvf go1.7. ...
- Flutter 36: 图解自定义 View 之 Canvas (三)
小菜继续学习 Canvas 的相关方法: drawVertices 绘制顶点 小菜上次没有整理 drawVertices 的绘制方法,这次补上:Vertice 即顶点,通过绘制多个顶点,在进行连线,多 ...
- 使用jMeter构造大量并发的随机HTTP请求
在前一篇文章使用jMeter构造大量并发HTTP请求进行微服务性能测试里,我介绍了如何用jMeter构造并发HTTP请求.但是通过文中介绍的方式构造的并发请求,其请求参数都是硬编码的'Wang'. 有 ...
- Redis和MemCache静态Map做缓存区别
本地缓存和分布式缓存 本地缓存:使用自带的map或者guava实现的是本地缓存,最主要的特点是轻量以及快速,生命周期随着jvm的销毁而结束,并且在多实例的情况下,每个实例都需要各自保存一份缓存,缓存不 ...
- Hexo NexT主题内加入动态背景
主题内新添加内容 _layout.swig 找到themes\next\layout\_layout.swig文件,添加内容:在<body>里添加: 1 2 3 <div class ...
- 在cmd下import cv2报错——OpenCV实现BRISK
平台:win10 x64 +JetBrains PyCharm 2018.2.4 x64 +Anaconda3(python3.7.0+opencv3.4.5) Issue说明:同学发了个python ...
- 屏蔽恶意IP
#!/bin/bash cat /var/log/secure | grep Failed | awk -F " " '{print $11}'| sort| uniq -c| a ...
- bat 获取当前文件夹的文件名
bat 获取当前文件夹的文件名 @echo off pushd %1 & for %%i in (.) do set curr=%%~ni echo %curr% pause