flutter常用内置动画组件
文章目录
AnimatedContainer
AnimatedCrossFade
Hero
AnimatedBuilder
DecoratedBoxTransition
FadeTransition
PositionedTransition/RelativePositionedTransition
RotationTransition
ScaleTransition
AlignTransition
SizeTransition
SlideTransition
AnimatedDefaultTextStyle
AnimatedListState
AnimatedModalBarrier
AnimatedOpacity
AnimatedPhysicalModel
AnimatedPositioned
AnimatedSize
AnimatedWidget
AnimatedWidgetBaseState
----------------------------------------------------------------
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
转载于:https://www.cnblogs.com/gxsyj/p/10936087.html
flutter常用内置动画组件相关推荐
- 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 ...
- oracle 触发器 和 常用内置程序包
--触发器和常用内置程序包 --author:shine --一.触发器: --1.触发器组成:由触发器语句,触发器限制,触发器操作三部分组成. --exp:1.1.1 create or repla ...
最新文章
- SICP 习题 (2.7) 解题总结 : 定义区间数据结构
- 【STM32】FreeRTOS 时间管理
- SSD201 / SSD202D 在86盒智能网关的应用分享
- 【Android】Android 4.2源码下载(ubuntu 12.10)
- Anaconda-Navigator无法打开
- 如何有效阅读英文数据手册?
- 《opencv学习笔记》-- 感兴趣区域(ROI)、图像混合
- 3:AngularJS:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
- 在godot的canvas_item着色器中构建逆投影矩阵和逆视图矩阵
- loadRunner之使用谷歌浏览器录制脚本
- 数据结构----二叉树
- 用canvas代码写或者three.js代码写一张截图,这张截图里面包含4张图片 ,其中3张图片有倾斜立体效果,剩下的一张是背景图...
- 计算机语言不能用中文吗,为什么不能用中文来做编程呢?
- x265 windwos使用wsl调试
- UML介绍及怎么看UML图
- NLP词性分析,实体分析,句法树构造(依存句法树分析)
- java基于ssm+vue网上考试报名系统 element
- DHT11(ASAIR)温湿度传感器的使用(软件)
- 第一部文学理论和评论专著是谁的著作?全书分为几个部分?
- VHDL 语言学习笔记(1)
热门文章
- mongodb模糊查询_我叫Mongo,收了「查询基础篇」,值得你拥有
- 如何成为一个优秀的测试工程师?必备的9大职业素质盘点
- linux内核按键驱动,嵌入式Linux按键驱动框架
- 理解go func背后发生了什么?
- python:threading.Thread类的使用详解
- C++中内存分配方式、空指针及野指针的区别
- fiddler 工具作用和使用场景
- c语言无线网络抓包程序,c语言实现抓包
- ipconfig默认网关为空_网络工程师之IPCONFIG命令详解
- maven创建java,Maven创建Java项目