Flutter 提供了 AnimatedWidget，用於簡化動畫。
繼承 AnimatedWidget 實現的 Widget，不需要再手動在 addListener() 新增的回撥中呼叫 setState()。
如何使用 AnimatedWidget？
1.繼承 AnimatedWidget
class AnimatedImage extends AnimatedWidget {
AnimatedImage({Key key, Animation<double> animation})
: super(key: key, listenable: animation);
Widget build(BuildContext context) {
final Animation<double> animation = listenable;
return Center(
child: SizedBox(
// 獲取 Animation 中的值
width: animation.value,
height: animation.value,
child: Container(
color: Colors.lightBlue,
),
);
}
}
複製程式碼關鍵點在於，實現 AnimatedWidget，然後在 build() 函式中建立檢視。
通過 animation.value 直接獲得結果，設定到檢視屬性上。
2.使用實現好的 AnimatedWidget
class ScaleAnimationRoute extends StatefulWidget {
@override
_ScaleAnimationRouteState createState() => _ScaleAnimationRouteState();
}
class _ScaleAnimationRouteState extends State<ScaleAnimationRoute>
with SingleTickerProviderStateMixin {
Animation<double> animation;
AnimationController controller;
initState() {
super.initState();
// 建立 AnimationController
controller = AnimationController(
duration: const Duration(seconds: 3), vsync: this);
// 建立 Animation
animation = Tween(begin: 0.0, end: 300.0).animate(controller);
// 不需要再在 `addListener()` 新增的回撥中呼叫 `setState()`
// 啟動動畫
controller.forward();
}
@override
Widget build(BuildContext context) {
// 把剛剛建立的 animation 傳入
return AnimatedImage(animation: animation,);
}
dispose() {
controller.dispose();
super.dispose();
}
}
複製程式碼
你看，不需要再寫 addListener、setState 這些程式碼！
實際上也沒省多少事，哈哈哈..