Flutter开发日记——Flutter动画Motion Widget详解（下）

本篇文章已授权微信公众号 YYGeeker 独家发布转载请标明出处

AnimatedDefaultTextStyle

1、简介

AnimatedDefaultTextStyle控件表示一个具有变化文本样式的动画控件
AnimatedDefaultTextStyle通过修改组件的style属性，系统将会通过动画的方式自动切换到新的style样式

2、构造函数

AnimatedDefaultTextStyle({Key key,@required this.child,@required this.style,this.textAlign,this.softWrap = true,this.overflow = TextOverflow.clip,this.maxLines,Curve curve = Curves.linear,@required Duration duration,Duration reverseDuration,
})

child：子控件，通常用Text组件
style：子控件的样式，用于动画变化
textAlign：如果文本超过1行时，所有换行的字体的对齐方式，可以是左对齐、右对齐
softWrap：文本是否应该在软换行符处换行，软换行和硬换行是word用法，具体自阅
overflow：超过文本行数区域的裁剪方式
maxLines：文本最大行数，默认是1
curve：动画插值器
duration：动画播放时长
reverseDuration：倒退动画播放时长

3、例子

通过_isSelected的值控制样式的切换

AnimatedDefaultTextStyle(softWrap: false,textAlign: TextAlign.right,maxLines: 2,overflow: TextOverflow.ellipsis,curve: Curves.linear,duration: Duration(seconds: 1),child: Text("Flutter message you!!!"),style: _isSelected? TextStyle(fontSize: 10.0,color: Colors.red,fontWeight: FontWeight.bold,): TextStyle(fontSize: 50.0,color: Colors.black,fontWeight: FontWeight.w300,),
),

通过计时器控制样式的切换

Timer.periodic(Duration(seconds: 1), (timer) {setState(() {switch (time % 4) {case 0:_isSelected = false;break;case 2:_isSelected = true;break;}time++;});
});

AnimatedListState/AnimatedList

1、简介

AnimatedListState控件表示一个具有动画的列表控件
AnimatedListState控件作为AnimatedList控件的key进行使用，可以控制列表动画和增删操作

2、构造函数

const AnimatedList({Key key,@required this.itemBuilder,this.initialItemCount = 0,this.scrollDirection = Axis.vertical,this.reverse = false,this.controller,this.primary,this.physics,this.shrinkWrap = false,this.padding,
})

itemBuilder：列表条目的构建者
initialItemCount：列表初始化条目的个数
scrollDirection：滚动的方向
reverse：是否翻转
controller：滚动控制器
primary：是否当用户点击状态栏时，该视图会滚动到顶部，只适用于iOS，默认支持
physics：控制用户滚动视图的交互
- AlwaysScrollableScrollPhysics：列表总是可滚动的
- PageScrollPhysics：一页一页的列表滑动，一般用于PageView控件用的滑动效果，滑动到末尾会有比较大的弹起
- ClampingScrollPhysics：滚动时没有回弹效果
- NeverScrollableScrollPhysics：就算内容超过列表范围也不会滑动
- BouncingScrollPhysics：不论什么平台都会有回弹效果
- FixedExtentScrollPhysics：仅滚动到子项而不存在任何偏移，必须与使用FixedExtentScrollController的可滚动对象一起使用
shrinkWrap：是否根据子widget的总长度来设置ListView的长度
padding：父控件的内边距

3、例子

通过点击加号随机生成字符串，对列表进行增加操作，通过点击条目的删除图标，对列表进行删除操作

class WeWidgetState extends State<WeWidget> {var data = <String>[];var tween = Tween<Offset>(begin: Offset(1, 0), end: Offset(0, 0));final animatedKey = GlobalKey<AnimatedListState>();@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('day19'),),floatingActionButton: FloatingActionButton(onPressed: () {var str = Random().nextInt(1000).toString();data.add(str);var index = data.lastIndexOf(str);animatedKey.currentState.insertItem(index);},child: Icon(Icons.add),),body: AnimatedList(physics: BouncingScrollPhysics(),padding: EdgeInsets.all(12.0),scrollDirection: Axis.vertical,primary: true,reverse: false,shrinkWrap: false,key: animatedKey,initialItemCount: data.length,itemBuilder: (context, int index, Animation<double> animation) {return animationListItem(data[index], animation);},),);}Widget animationListItem(String str, animation) {return SlideTransition(position: animation.drive(tween),child: listItem(str),);}Widget listItem(String str) {return ListTile(title: Text('$str', style: TextStyle(fontSize: 30)),trailing: IconButton(icon: Icon(Icons.delete_forever),onPressed: () {var index = data.indexOf(str);data.remove(str);animatedKey.currentState.removeItem(index, (context, animation) => animationListItem(str, animation));},),);}
}

AnimatedModalBarrier

1、简介

AnimatedModalBarrier控件表示一个具有颜色值变化的动画控件
AnimatedModalBarrier控件可防止用户与其自身背后的小部件进行交互，并且可以使用颜色动画进行过渡
AnimatedModalBarrier控件举例说明，当屏幕上出现对话框时，对话框下方的页面通常会被ModalBarrier变暗

2、构造函数

const AnimatedModalBarrier({Key key,Animation<Color> color,this.dismissible = true,this.semanticsLabel,this.barrierSemanticsDismissible,
})

color：颜色值动画变化
dismissible：是否触摸当前ModalBarrier将弹出当前路由，配合点击事件弹出路由使用
semanticsLabel：语义化标签
barrierSemanticsDismissible：语义树中是否包括ModalBarrier语义

3、例子

Widget _buildColumn() {return Center(child: Container(width: 200,height: 200,child: AnimatedModalBarrier(semanticsLabel: "StackBarrier",barrierSemanticsDismissible: true,dismissible: true,color: _animation,),),);
}

AnimatedOpacity

1、简介

AnimatedOpacity控件表示一个具有透明度变化的动画控件

2、构造函数

const AnimatedOpacity({Key key,this.child,@required this.opacity,Curve curve = Curves.linear,@required Duration duration,
})

child：子控件
opacity：透明度动画变化值
curve：动画的插值器
duration：动画的时长

3、例子

通过定时器改变透明度的大小

class WeWidgetState extends State<WeWidget> {WeWidgetState() {Timer.periodic(Duration(milliseconds: 1000), (timer) {setState(() {switch (time % 2) {case 0:_opacity = 0.3;break;case 1:_opacity = 1.0;break;}time++;});});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("day21"),),body: _buildColumn(),);}Widget _buildColumn() {return Center(child: AnimatedOpacity(curve: Curves.fastOutSlowIn,opacity: _opacity,duration: Duration(seconds: 1),child: FlutterLogo(style: FlutterLogoStyle.horizontal,size: 200,),),);}
}

AnimatedPhysicalModel

1、简介

AnimatedPhysicalModel控件表示一个具有阴影背景动画的控件

2、构造函数

const AnimatedPhysicalModel({Key key,@required this.child,@required this.shape,this.clipBehavior = Clip.none,this.borderRadius = BorderRadius.zero,@required this.elevation,@required this.color,this.animateColor = true,@required this.shadowColor,this.animateShadowColor = true,Curve curve = Curves.linear,@required Duration duration,
})

child：子控件
shape：阴影的形状
clipBehavior：阴影的裁剪方式
- Clip.none：无模式
- Clip.hardEdge：裁剪速度稍快，但容易失真，有锯齿
- Clip.antiAlias：裁剪边缘抗锯齿，使得裁剪更平滑，这种模式裁剪速度比antiAliasWithSaveLayer快，但是比hardEdge慢
- Clip.antiAliasWithSaveLayer：裁剪后具有抗锯齿特性并分配屏幕缓冲区，所有后续操作在缓冲区进行
borderRadius：背景的边框
elevation：阴影颜色值的深度
color：背景色
animateColor：背景色是否用动画形式展示
shadowColor：阴影的动画值
animateShadowColor：阴影是否用动画形式展示
curve：动画的插值器
duration：动画的时长

3、例子

Widget _buildColumn() {return Center(child: AnimatedPhysicalModel(curve: Curves.fastOutSlowIn,color: Colors.grey.withOpacity(0.2),clipBehavior: Clip.antiAliasWithSaveLayer,borderRadius: BorderRadius.circular(12.0),animateColor: true,animateShadowColor: true,shape: BoxShape.rectangle,shadowColor: _shadowColor,elevation: 20.0,duration: Duration(seconds: 1),child: FlutterLogo(style: FlutterLogoStyle.horizontal,size: 200,),),);}

AnimatedPositioned

1、简介

AnimatedPositioned控件表示一个具有位置变化动画的控件

2、构造函数

const AnimatedPositioned({Key key,@required this.child,this.left,this.top,this.right,this.bottom,this.width,this.height,Curve curve = Curves.linear,@required Duration duration,
})

child：子控件
left：左边距离
top：上边距离
right：右边距离
bottom：下边距离
width：控件的宽度
height：控件的高度
curve：动画的插值器
duration：动画的时长

3、例子

通过改变左上角位置和宽高进行动画播放

class WeWidgetState extends State<WeWidget> {WeWidgetState() {Timer.periodic(Duration(milliseconds: 1000), (timer) {setState(() {switch (time % 2) {case 0:_width = 100.0;break;case 1:_width = 200.0;break;}time++;});});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("day23"),),body: _buildColumn(),);}Widget _buildColumn() {return Stack(children: <Widget>[AnimatedPositioned(curve: Curves.fastOutSlowIn,width: _width,height: _width,top: _width,left: _width,duration: Duration(seconds: 1),child: FlutterLogo(style: FlutterLogoStyle.horizontal,size: 200,),),],);}
}

AnimatedSize

1、简介

AnimatedSize控件表示一个具有尺寸变化动画的控件

2、构造函数

const AnimatedSize({Key key,Widget child,this.alignment = Alignment.center,this.curve = Curves.linear,@required this.duration,this.reverseDuration,@required this.vsync,
})

child：子控件
alignment：子控件的对齐方式
curve：动画的插值器
duration：动画的时长
reverseDuration：翻转动画的时长
vsync：是否开启垂直同步

3、例子

class WeWidgetState extends State<WeWidget>with SingleTickerProviderStateMixin {WeWidgetState() {Timer.periodic(Duration(milliseconds: 1000), (timer) {setState(() {switch (time % 2) {case 0:_width = 100.0;break;case 1:_width = 200.0;break;}time++;});});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("day24"),),body: _buildColumn(),);}Widget _buildColumn() {return Center(child: AnimatedSize(alignment: Alignment.center,curve: Curves.fastOutSlowIn,vsync: this,duration: Duration(seconds: 1),reverseDuration: Duration(seconds: 2),child: FlutterLogo(style: FlutterLogoStyle.horizontal,size: _width,),),);}
}

Flutter开发日记——Flutter动画Motion Widget详解（下）相关推荐

Flutter Widget详解
Flutter Widget详解 Widget是Flutter应用程序用户界面的基本构建块.每个Widget都是用户界面一部分的不可变声明. 与其他将视图.控制器.布局和其他属性分离的框架不同,Flu ...
flutter开发实战-flutter二维码条形码扫一扫功能实现
flutter开发实战-flutter二维码条形码扫一扫功能实现 flutter开发实战-flutter二维码扫一扫功能实现,要使用到摄像头的原生的功能,使用的是插件:scan 效果图如下一.扫一扫 ...
桌面widget详解（四）——桌面音乐播放器（实战）
前言:这将是这个系列的最后一篇了,我写这几篇文章也是累的快不行了,再写就真的要吐了,言归正转,前面三篇已经把widget中涉及到的基本知识基本上讲完了,今天我们就做一个小例子,看看桌面音乐播放器wid ...
ecshop二次开发手册,ECSHOP文件结构,ECSHOP目录详解
Ecshop文件结构 :ecshop二次开发手册,ECSHOP文件结构,ECSHOP目录详解 /* ECShop 最新程序的结构图及各文件相应功能介绍 ECShop文件结构目录 ┣ activity ...
php仿苹果,关于8个超炫酷仿苹果应用的HTML5动画的图文详解
苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...
STM32开发实战：W25Q32JV SPI Flash详解
STM32开发实战:W25Q32JV SPI Flash详解在STM32单片机的应用中,使用SPI Flash能够有效地扩展程序和数据存储空间.W25Q32JV SPI Flash是一种常用的Fla ...
html中怎么做扇形菜单,CSS3实现扇形动画菜单流程详解
这次给大家带来CSS3实现扇形动画菜单流程详解,CSS3实现扇形动画菜单的注意事项有哪些,下面就是实战案例,一起来看一下. 原文章请点击这里简化版完整实例 CSS3扇形动画菜单 *{padding: ...
ios 扇形按钮_IOS 开发中画扇形图实例详解
IOS 开发中画扇形图实例详解昨天在做项目中,遇到一个需要显示扇形图的功能,网上搜了一下,发现code4app里面也没有找到我想要的那种类似的效果,没办法了,只能自己学习一下如何画了. 首先我们需要 ...
iOS动画-CAAnimation使用详解
理解了隐式动画后,显式动画就更加通俗易懂了.区别于隐式动画的特点,显式动画就是需要我们明确指定类型.时间等参数来实现效果的动画.除此之外,我们也可以创建非线性动画,比如沿着任意一条曲线运动等: 我们平 ...

Flutter开发日记——Flutter动画Motion Widget详解（下）

AnimatedDefaultTextStyle

AnimatedListState/AnimatedList

AnimatedModalBarrier

AnimatedOpacity

AnimatedPhysicalModel

AnimatedPositioned

AnimatedSize

Flutter开发日记——Flutter动画Motion Widget详解（下）相关推荐

最新文章

热门文章