歡迎轉發，更多傳播最新技術知識。
前面系列文章 中，我們使用Flutter原生框架完成了一個簡單的demo，初步認識了一下Flutter的UI框架。這篇文章將會使用AnimationController部件創建一個計數動畫，效果如下：
步驟
1. 打開IntelliJ IDEA
2. 創建一個Flutter項目，將默認創建的代碼全部刪除。
3. 創建AnimationControllerOutPutBody類
- 由於需要修改狀態，因此擴展自StatefulWidget，
class AnimationControllerOutPutBody extends StatefulWidget {
@override
State
return new AnimationControllerOutPutBodyState();
}
}
4. 創建AnimationControllerOutPutBodyState類
- 擴展自State
- 提供一個垂直同步時鐘，使用SingleTickerProviderStateMixin即可
AnimationController：
- vsync：垂直同步時鐘，不能為空
- duration：動畫持續時長
- animation.addListener(Callback)：每次動畫改變時，將回調該函數，因此在這裡setState改變UI
- animation.dispose()：部件銷燬時，需要銷燬AnimationController
class AnimationControllerOutPutBodyState
extends State
with SingleTickerProviderStateMixin {
AnimationController animation;
@override
void initState() {
super.initState();
animation = new AnimationController(
vsync: this,
duration: new Duration(seconds: 3),
);
animation.addListener(() {
this.setState(() {});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: new Container(
color: Colors.white,
child: new GestureDetector(
child: new Center(
child: new Text(
animation.isAnimating ? animation.value.toStringAsFixed(3) : "開始動畫",
style: new TextStyle(
fontSize: 50.0,
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
onTap: () {
animation.forward(from: 0.0);
},
),
));
}
@override
void dispose() {
animation.dispose();
super.dispose();
}
}
結語
Flutter動畫使用起來十分簡單方便，大家可以花費一些時間去嘗試做出一些更好玩更酷的動畫。
閱讀更多 郝先生談技術 的文章
