《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,
      ),
    ));
  }

效果如下：