相信現在大部分的人已經瞭解過 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官網
