《Flutter 控件大全》第一零零：TweenAnimationBuilder

• 如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。
• 同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。
• Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。

开发App中有时需要一个简单的动画，可以通过AnimationController实现，但比较麻烦，有没有一个内置的隐式动画组件来解决这个问题？TweenAnimationBuilder可以满足你对所有自定义动画的需求，而不用关系AnimationController。

TweenAnimationBuilder用法比较简单，首先需要一个动画时长参数：

TweenAnimationBuilder<double>(
	duration: Duration(seconds: 2),
)

然后添加一个builder方法，用法如下：

builder: (context, value, child) {
        return Container(
          height: value,
          width: value,
          child: child,
        );
      }

builder方法有3个参数，第一个是BuildContext，第二个value的类型取决于你要做动画的数据，比如：

TweenAnimationBuilder<double>(
	builder: (context, value, child) {
	}
)

value的类型就是double，如果是TweenAnimationBuilder<Color>,value的类型就是Color。
第三个就是TweenAnimationBuilder的子组件，用于优化。

设置tween（动画的值），比如需要一个100到200的差值，设置如下：

tween: Tween<double>(begin: 100.0, end: 200),

如果需要颜色值使用ColorTween,这样我们的动画组件就可以动起来了。

我们也可以设置动画曲线，设置如下：

TweenAnimationBuilder<double>(
	 curve: Curves.bounceIn,
)

通过onEnd监听动画完成通知，用法如下：

TweenAnimationBuilder<double>(
	 onEnd: () {}
)

下面写一个图片不断放大变小的demo：

double _value = 200;
  
  @override
  Widget build(BuildContext context) {
    return Center(
        child: TweenAnimationBuilder<double>(
      tween: Tween<double>(begin: 100.0, end: _value),
      duration: Duration(seconds: 2),
      curve: Curves.bounceIn,
      builder: (context, value, child) {
        return Container(
          height: value,
          width: value,
          child: child,
        );
      },
      onEnd: () {
        setState(() {
          _value = _value == 200 ? 250 : 200;
        });
      },
      child: Image.network(
        'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
        fit: BoxFit.fill,
      ),
    ));
  }

效果如下：