【Flutter 實戰】一文學會20多個動畫元件
阿新 • • 發佈：2020-08-19
> 老孟導讀：此篇文章是 Flutter 動畫系列文章第三篇，後續還有動畫序列、過度動畫、轉場動畫、自定義動畫等。
Flutter 系統提供了20多個動畫元件，只要你把前面【動畫核心】(文末有連結)的文章看明白了，這些元件對你來說是非常輕鬆的，這些元件大部分都是對常用操作的封裝。
## 顯示動畫元件
回顧上一篇【動畫核心】的文章中建立動畫三個必須的步驟：
1. 建立 AnimationController。
2. 監聽 AnimationController，呼叫 `setState` 重新整理UI。
3. 釋放 AnimationController。
看第二步，每個動畫都需要這個步驟，因此對其封裝，命名為 MyAnimatedWidget：
```dart
class MyAnimatedWidget extends StatefulWidget {
final AnimationController controller;
final Widget child;
const MyAnimatedWidget(
{Key key, @required this.controller, @required this.child})
: super(key: key);
@override
_MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}
class _MyAnimatedWidgetState exten