Flutter的AnimatedContainer实现容器样式的动画切换
原创Flutter的AnimatedContainer实现容器样式的动画切换
原创
早起的年轻人
修改于 2020-07-13 10:12:43
修改于 2020-07-13 10:12:43
题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。
重要消息
AnimatedContainer可以理解为Container Animat，也就是说带动画的容器，使用AnimatedContainer可以很方便的实现Widget的动画效果。
如下图所示的效果，默认情况下图片是一个正方形展示效果，当点击图片后，图片的宽度与高度由原来的100在1秒时间内过渡到200像素，并且变为圆形。
在这里插入图片描述
上图所示的效果过程就可以通过AnimatedContainer来轻松的实现，代码如下：
///AnimatedContainer 的基本使用
class AnimatedContainerPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return ClipRectPageState();
}
}
class ClipRectPageState extends State {
///点击标识
bool click = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: Text("AnimatedContainer基本使用"),
),
body: Center(
///手势识别
child: GestureDetector(
onTap: () {
setState(() {
click = !click;
});
},
///动画容器
child: AnimatedContainer(
///动画插值器
curve: Curves.bounceInOut,
///容器的高度
height: click ? 200 : 100,
///容器的宽度
width: click ? 200 : 100,
///容器的装饰
decoration: BoxDecoration(
///背景图片
image: DecorationImage(
///加载资源目录下的图片
image: AssetImage('assets/images/2.0x/banner4.webp'),
fit: BoxFit.cover,
),
///圆角
borderRadius: BorderRadius.all(Radius.circular(
click ? 200 : 0,
))),
///过渡时间
duration: Duration(milliseconds: 15000),
),
),
),
);
}
}原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读