目录
简介
什么是动画呢？动画实际上就是不同的图片连续起来形成的。flutter为我们提供了一个animationcontroller来对动画进行详尽的控制，不过直接是用animationcontroller是比较复杂的，如果只是对一个widget的属性进行修改，可以做成动画吗？
答案是肯定的，一起来看看吧。
flutter中的动画widget
如果你只是希望动画展示widget的属性的变化，比如比如长度，高度，宽度或者颜色等进行动态变化，那么可以直接使用flutter提供的animatedcontainer。
先来看下animatedcontainer的定义：
class animatedcontainer extends implicitlyanimatedwidget
animatedcontainer继承自implicitlyanimatedwidget，什么是implicitlyanimatedwidget呢？翻译过来就是隐式的动画widget。
这个widget会自动根据widget属性的变化生成对应的动画。在使用上非常的简单。
animatedcontainers使用举例
animatedcontainer是一个container,所以它可以包含child属性，但是animatedcontainer的动画只是针对容器本身来说的，动画并不会应用到它的child中。
所以为了展示widget本身的变化，我们可以给widget设置一个boxdecoration，设置它的颜色跟borderradius。
如下所示：
body: center(
child: animatedcontainer(
width: 200,
height: 200,
decoration: boxdecoration(
color: colors.blue,
borderradius: borderradius.circular(10),
),
duration: const duration(seconds: 1),
curve: curves.easeinback,
),
)
上面的代码会在界面上展示一个长度和宽度都等于200的container,它的背景是blue，还有一个圆形的borderradius。
并且我们定义了动画的duration和变动曲线的方式。
接下来我们只需要在setstate方法中对animatedcontainer中的属性进行变化，就会自动触发动画效果。
为了实现这个动画的功能，我们需要把width，height等属性用动态变量存储起来，这样才可以在setstate的时候对属性进行变动。
我们将这些属性放在一个statefulwidget的state中：
double _width = 100; double _height = 100; color _color = colors.blue; borderradiusgeometry _borderradius = borderradius.circular(10);
这样我们在build方法中使用上面定义的属性：
body: center(
child: animatedcontainer(
width: _width,
height: _height,
decoration: boxdecoration(
color: _color,
borderradius: _borderradius,
),
duration: const duration(seconds: 1),
curve: curves.easeinback,
),
)
然后在floatingactionbutton的onpressed中修改这些属性，从而实现widget属性变化的动画功能：
floatingactionbutton: floatingactionbutton(
onpressed: () {
setstate(() {
final random = random();
_width = random.nextint(200).todouble();
_height = random.nextint(200).todouble();
_color = color.fromrgbo(
random.nextint(256),
random.nextint(256),
random.nextint(256),
1,
);
_borderradius =
borderradius.circular(random.nextint(10).todouble());
});
}
最后实现的效果如下：
总结
如果你只是希望使用简单的widget动画，那么animatedcontainer可能是你最好的选择。
本文的例子：
