flutter 动画json_flutter常用内置动画组件
文章目录
----------------------------------------------------------------
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: [
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 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 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 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: [
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: [
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的基类
flutter 动画json_flutter常用内置动画组件相关推荐
- 2020.11.9--AE--文字的文本属性、文字动画效果、内置动画预设
文字的文本属性 源文本一般用于制作字幕 路径选项一般用于文字路径动画 更多选项调节字符锚点与字符混合模式 文字动画效果 变换属性:调整文本的变换属性 填充描边:调整文本的填充描边 字符间距/位移:调节 ...
- flutter常用内置动画组件
文章目录 AnimatedContainer AnimatedCrossFade Hero AnimatedBuilder DecoratedBoxTransition FadeTransition ...
- Vue 基础之常用内置指令
Vue 基础之常用内置指令 描述 指令 内容渲染指令 {{}} 与 v-text 覆盖面积 v-text {{}} 闪现问题 {{}} v-text v-html 属性绑定指令 v-bind 简写 : ...
- javascript数据类型和常用内置对象(重要!)
数据类型:w3c undefind null string number boolean Array object 常用内置javascript对象: Array对象:Date对象:正则 ...
- python常用内置函数总结-Python 常用内置函数
Python 常用内置函数如下: 1. abs()函数返回数字的绝对值. print( abs(-45) )# 返回45print("abs(0.2):",abs(0.2))#返回 ...
- python常用内置模块-Python之OS模块常用内置方法汇总
OS模块的常用内置方法 chdir修改当前工作目录到指定目录 Change the current working directory to the specified path. chmod修改一个 ...
- python迭代器-迭代器取值-for循环-生成器-yield-生成器表达式-常用内置方法-面向过程编程-05...
迭代器 迭代器 迭代: # 更新换代(其实也是重复)的过程,每一次的迭代都必须基于上一次的结果(上一次与这一次之间必须是有关系的) 迭代器: # 迭代取值的工具 为什么用迭代器: # 迭代器提供了一种 ...
- jmeter中没有sampler_jmeter(七)-BeanShell常用内置变量和场景
Bean Shell常用内置变量 JMeter在它的BeanShell中内置了变量,用户可以通过这些变量与JMeter进行交互,其中主要的变量及其使用方法如下: log:写入信息到jmeber.log ...
- MySQL学习笔记_7_MySQL常用内置函数
MySQL常用内置函数 说明: 1)可以用在SELECT/UPDATE/DELETE中,及where,orderby,having中 2)在函数里将字段名作为参数,变量的值就是字段所对应的每一行的值. ...
- 【学习笔记】16、常用内置函数(Built-in Functions)
常用内置函数(Built-in Functions) 可以参照中文版文档:Python3 内置函数 | 菜鸟教程 常用的内置函数可以做如下分类: 1.数据类型相关 type() – 取数据类型 int ...
最新文章
- CFRunLoopRef 的内部逻辑(向 ibireme学习)
- ISCW实验:配置Cisco IOS EASY ××× Server和Cisco ××× Client
- cocos2d python文档_【Cocos2D-X 学习笔记】Cocos2D-x 3.0+VS开发环境搭建[使用Python]
- Java线程怎么发送消息_Java客户端Socket如何能在阻塞线程下收到服务端发送来的消息?...
- 深度强化学习-Actor-Critic算法原理和实现
- JAVA开发面试常问问题总结4
- 【Codeforces 467C】George and Job
- 哈尔滨矢量地图_哈尔滨地图,哈尔滨电子地图,哈尔滨地图查询,哈尔滨街景地图 - 城市吧街景地图...
- Geometric application of BSTs
- 物联网技术,主要包括哪些核心技术
- android摄像头(camera)之buffer管理
- 一、科里奥利质量流量计
- 面试官:如何用最少的老鼠试出有毒的牛奶?
- Exp6 信息搜集与漏洞扫描 20164323段钊阳
- RK3288 开发板 排插物理引脚对应图以及如何进入android6.0.1内核终端、uboot终端
- Solidity 从入门到实战(六)
- MATLAB代码:含冰蓄冷空调的冷热电联供型微网多时间尺度优化调度
- 网新恒天2014校园招聘笔试编程题
- 开源八预言:桌面Linux必亡、Hadoop要火
- amq web管理界面参数含义