【Flutter 實戰】動畫核心
阿新 • • 發佈：2020-07-07
> 老孟導讀：動畫系統是任何一個UI框架的核心功能，也是開發者學習一個UI框架的重中之重，同時也是比較難掌握的一部分，下面我們就一層一層的揭開 Flutter 動畫的面紗。
任何程式的動畫原理都是一樣的，即：視覺暫留，視覺暫留又叫視覺暫停，人眼在觀察景物時，光訊號傳入大腦神經，需經過一段短暫的時間，光的作用結束後，視覺形象並不立即消失，這種殘留的視覺稱“後像”，視覺的這一現象則被稱為“視覺暫留”。
人眼能保留0.1-0.4秒左右的影象，所以在 1 秒內看到連續的25張影象，人就會感到畫面流暢，而 1 秒內看到連續的多少張影象稱為 幀率，即 **FPS**，理論上 達到 24 FPS 畫面比較流暢，而Flutter，理論上可以達到 60 FPS。
### AnimationController
介紹完了動畫系統的基本原理，實現一個藍色盒子大小從 100 變為 200動畫效果：
```dart
class AnimationBaseDemo extends StatefulWidget {
@override
_AnimationBaseDemoState createState() => _AnimationBaseDemoState();
}
class _AnimationBaseDemoState exten