Flutter动画合集
你可以在我的博客看到这篇文章
Flutter 可以很方便的实现比较炫酷的动画。
AnimatedContainer
在这个控件中可以方便的给它的width宽,height高,color背景色,padding内边距,margin外边距,transform变换，装饰等，添加动画，
使用它可以快速实现大部分的动画效果，
宽高动画
//标记动画的状态
bool status = true;
//宽高的变量
double _height = 100.0;
double _width = 100.0;
//通过改变宽高的值，响应动画处理，这个效果是控件的高度和宽度发生变化。如图1
void _animating() {
setState(() {
if (status) {
_height = 100.0;
_width = 100.0;
} else {
_height = 200.0;
_width = 200.0;
}
status = !status;
});
}
//这是处理点击事件的widget
GestureDetector(
//响应点击事件
onTap: _animating,
child: AnimatedContainer(
//当height或者width的值发生变化时，自动进行动画
height: animationHeight,
width: animationWidth,
color: Colors.amber,
duration: Duration(milliseconds: 300),
child: Container(),
),
),
颜色动画
//背景颜色的变化
Color _color = Colors.amber;
void _animating() {
setState(() {
//直接改变颜色
if (status) {
_color = Colors.amber;
} else {
_color = Colors.blue;
}
status = !status;
});
}
GestureDetector(
onTap: _animating,
child: Center(
child: AnimatedContainer(
height: _height,
width: _width,
//加入了颜色的变化
color: _color,
duration: Duration(milliseconds: 300),
child: Container( ),
),
),
),
注意颜色的变化。
padding 内边距
void _animating() {
setState(() {
if (status) {
_padingValue = 40.0;
} else {
_padingValue = 30.0;
}
status = !status;
});
}
GestureDetector(
onTap: _animating,
child: Center(
child: AnimatedContainer(
height: _height,
width: _width,
color: _color,
//加入了内边距的变化
padding: EdgeInsets.all(_padingValue),
duration: Duration(milliseconds: 300),
child: Center(
//同时为了更好观察内边距的变化，我在内部加了一个宽度为80，颜色白色的小部件。注意观察它的宽度变化
child: Container(
width: 80,
color: Colors.white,
child: Text("内部"),
),
),
),
),
),
可以观察到由于padding的变化，内部的宽度也发生了变化。
margin外边距
void _animating() {
setState(() {
if (status) {
_marginValue = 0.0;
} else {
_marginValue = 30.0;
}
status = !status;
});
}
GestureDetector(
onTap: _animating,
child: Center(
//为了观察margin的变化，我在AnimatedContainer上下各加了widget，观察他们之间的距离
child: Column(
children: <Widget>[
Text("上"),
AnimatedContainer(
height: _height,
width: _width,
color: _color,
margin: EdgeInsets.all(_marginValue),
padding: EdgeInsets.all(_padingValue),
duration: Duration(milliseconds: 300),
child: Center(
child: Container(
width: 80,
color: Colors.white,
child: Text("内部"),
),
),
),
Text("下"),
],
),
),
),
子控件对齐
注意这个属性是作用在了子widget上
void _animating() {
setState(() {
if (status) {
//中间对齐
_alignment = Alignment.center;
} else {
//底部右侧
_alignment = Alignment.bottomRight;
}
status = !status;
});
}
GestureDetector(
onTap: _animating,
child: Center(
child: AnimatedContainer(
//控制内部的子控件的对齐方式
alignment: _alignment,
height: 300,
width: 300,
color: _color,
duration: Duration(milliseconds: 500),
child: Container(
width: 80,
color: Colors.white,
child: Text("内部"),
),
),
),
),
内部的子控件由中间移动到右下角
transform 变换
这个主要是用到了矩阵变换，比如移动位置，放大，缩小 等操作。这些操作也有专门的widget，以后会写出来。
void _animating() {
setState(() {
if (status) {
_matrix4 = Matrix4.translationValues(0, 0, 0);
} else {
_matrix4 = Matrix4.translationValues(20, 50, 0);
}
status = !status;
});
}
GestureDetector(
onTap: _animating,
child: Center(
child: AnimatedContainer(
height: 150,
width: 150,
color: _color,
transform: _matrix4,
duration: Duration(milliseconds: 500),
child: Center(
child: Container(
width: 50,
height: 50,
color: Colors.deepOrange,
),
),
),
),
),
这里展示了位移的变化
但是使用transform进行变换的动画操作还是有一定局限的，比如旋转操作无法指定旋转的中心点，如果像实现这个操作还是得依靠AnimatedBuilder.
decoration 装饰，比如背景色color（注意不能和外部的color同时设置，会报错），边框，等
GestureDetector(
onTap: _animating,
child: Center(
child: AnimatedContainer(
height: 150,
width: 150,
//装饰器
decoration: BoxDecoration(
//背景色也可以在这里进行修改
color: _color,
//边框的颜色和边框宽度变化
border: Border.all(
color: status ? Colors.cyanAccent : Colors.black,
width: status ? 20 : 10)),
duration: Duration(milliseconds: 500),
child: Center(
child: Container(
width: 50,
height: 50,
color: Colors.deepOrange,
),
),
),
),
)
