flutter 动画展开菜单_Flutter 动画详解系列——隐式动画

上一篇文章Flutter 动画详解系列概述了下Flutter中的动画类型，及如何选择恰当的动画创建方式，接下来我们来看下最简单的动画，隐式动画。

系统的隐式动画Widget

在 Flutter 中的 Widgets 中有一部已经实现隐式动画Widget。如下图列出部分：

implicit_animation.png

首先我们来看一段未使用动画的代码：

bool _bigger = false;

@override

Widget build(BuildContext context) {

return Scaffold(

body: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Center(

child: Container(

width: _bigger ? 100 : 500,

height: 100,

color: Colors.red,

),

),

RaisedButton(

onPressed: () => setState(() {

_bigger = !_bigger;

}),

child: Icon(Icons.star),

),

],

),

);

}

未加动画效果时，矩形的形变会显得十分生硬，如果使用AnimatedContainer替换Container，增加一个动画的过渡效果：

Center(

child: AnimatedContainer(

width: _bigger ? 100 : 500,

height: 100,

color: Colors.red,

duration: Duration(seconds: 1),

),

),

整个过渡过程显得比较自然顺畅，我们通过新旧值之间的值进行动画处理的过程称为插值。每当旧值和新值发生变化时，AnimatedContainer便会处理其属性插值。

同样我们也可