Flutter AnimatedContainer 自帶動畫的Widget

相信現在大部分的人已經瞭解過 Flutter. 如果還沒有，那麼可以去 Flutter官網 瞭解一下

AnimatedContainer

瞭解過Android 開發的應該知道，在Android 中給控制元件設定屬性動畫還是比較麻煩的，而且多個屬性動畫一起設定的話更是麻煩，要寫很多行程式碼。

那麼在Flutter 中，給Widget 設定動畫就完全不需要那麼複雜。只需要使用AnimatedContainer就夠了。

AnimatedContainer看名字就應該知道，他是Container + Animat ，也就是帶動畫的容器。AnimatedContainer繼承於ImplicitlyAnimatedWidget，我們點開原始碼，可以看到類上面的註釋：

/// An abstract widget for building widgets that gradually change their /// values over a period of time. /// /// Subclasses' States must provide a way to visit the subclass's relevant /// fields to animate. [ImplicitlyAnimatedWidget] will then automatically /// interpolate and animate those fields using the provided duration and /// curve when those fields change.

簡單翻譯一下就是：

這個類是用來構建帶動畫的widget，可以在一段時間內改變其值。

子類必須提供一種方法來訪問子類的相關欄位以進行動畫的處理，當這些欄位發生變化的時候，ImplicitlyAnimatedWidget 將使用提供的 duration 和 curve 來自動設定動畫。

說的很厲害，來個例子：

實現上圖效果非常簡單，邏輯程式碼根本沒有，只需要定義好幾個數值，隨機就ok。

首先定義幾個變數：顏色，位置，寬高和下標：

  var _colors = [
    Colors.red,
    Colors.green,
    Colors.amber,
    Colors.blue,
    Colors.deepPurple
  ];

  var _alignments = [
    Alignment.center,
    Alignment.bottomLeft,
    Alignment.bottomRight,
    Alignment.topRight,
    Alignment.topLeft,
  ];

  double _weight = 400;
  double _height = 400;

  int index = 0;
複製程式碼

然後我們定義一個方法，用來點選的時候呼叫，隨機變換數值：

next() {
    setState(() {
      if(_weight == 400){
        _weight -= 100;
        _height -= 100;
      }else {
        _weight += 100;
        _height += 100;
      }
      index = Random().nextInt(5);
    });
}
複製程式碼

最後我們寫build方法來實現頁面：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedContainerDemo'),
      ),
      body: Center(	// 讓View在中間
        child: GestureDetector(	// 手勢識別控制元件，用來寫點選事件
          onTap: (){
            setState(() {
              next();
            });
          },
          child: AnimatedContainer(	// AnimatedContainer控制元件
            width: _weight,	//設定上變數裡的寬高
            height: _height,
            curve: Curves.fastOutSlowIn,	// 設定插值屬性
            duration: Duration(milliseconds: 500),	// 設定時間
            color: _colors[index],	//設定顏色
            alignment: _alignments[index],	// 設定位置
            child: Text(
              'A',
              style: TextStyle(color: Colors.white, fontSize: 50),
            ),
          ),
        ),
      ),
    );
  }
複製程式碼

可以看到程式碼裡非常簡單，只是設定了一個AnimatedContainer Widget，把屬性填上去。

這個時候和我們在ImplicitlyAnimatedWidget原始碼中看到的註釋一樣，只要有值發生了變化，那麼AnimatedContainer就會自動設定插值屬性來改變值，這樣動畫效果就出來了。

小結

使用Flutter 提供的 AnimatedContainer 可以很方便的實現 Widget的動畫效果，在做一些簡單的動畫時可以說是非常方便了。其實還有很多類似於 AnimatedContainer的 Widget，使用方法都類似，就不一一講解了，如果有不知道在哪看的同學，請移步Flutter官網