成爲Flutter動畫大師(三)

目錄傳送門：《Flutter快速上手指南》先導篇

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 這些代碼！

實際上也沒省多少事，哈哈哈..

目錄傳送門：《Flutter快速上手指南》先導篇

如何找到我？

傳送門：CoorChice 的主頁

傳送門：CoorChice 的 Github