​​更多文章請檢視 flutter從入門 到精通​​

flutter 動畫狀态監聽器

AnimationController

//動畫控制器
     AnimationController controller;
    //AnimationController是一個特殊的Animation對象，在螢幕重新整理的每一幀，就會生成一個新的值，
    // 預設情況下，AnimationController在給定的時間段内會線性的生成從0.0到1.0的數字
    //用來控制動畫的開始與結束以及設定動畫的監聽
    //vsync參數，存在vsync時會防止螢幕外動畫（動畫的UI不在目前螢幕時）消耗不必要的資源
    //duration 動畫的時長，這裡設定的 seconds: 2 為2秒，當然也可以設定毫秒 milliseconds：2000.
    controller =
        AnimationController(duration: const Duration(seconds: 2), vsync: this);
    //動畫開始、結束、向前移動或向後移動時會調用StatusListener
    controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        //動畫從 controller.reverse() 反向執行 結束時會回調此方法
        print("status is completed");
        // controller.reset(); 将動畫重置到開始前的狀态
        //開始執行
        //controller.forward();
      } else if (status == AnimationStatus.dismissed) {
        //動畫從 controller.forward() 正向執行 結束時會回調此方法
        print("status is dismissed");
        //controller.forward();
      }else if (status == AnimationStatus.forward) {
        print("status is forward");
        //執行 controller.forward() 會回調此狀态
      }else if (status == AnimationStatus.reverse) {
        //執行 controller.reverse() 會回調此狀态
        print("status is reverse");
      }
    });
      

AnimationController 的常用操作說明

值	說明
controller.forward()	正向開始執行動畫
controller.reverse()	反向開始執行動畫
controller.reset()	重置動畫到初始狀态
controller.dispose()	取消/停止動畫

flutter AnimationStatus 動畫狀态說明

AnimationStatus.forward	執行 controller.forward() 會回調此狀态
AnimationStatus.reverse	執行 controller.reverse() 會回調此狀态
AnimationStatus.dismissed	動畫從 controller.reverse() 反向執行 結束時會回調此方法
AnimationStatus.completed)	動畫從 controller.forward() 正向執行 結束時會回調此方法

flutter FadeTransition實作透明度漸變動畫

//動畫控制器
  AnimationController controller;    
  
   controller =
        AnimationController(duration: const Duration(seconds: 2), vsync: this);
    //動畫開始、結束、向前移動或向後移動時會調用StatusListener
    controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        //動畫從 controller.forward() 正向執行 結束時會回調此方法
        print("status is completed");
        //反向執行
        //controller.reverse();
      } else if (status == AnimationStatus.dismissed) {
        //動畫從 controller.reverse() 反向執行 結束時會回調此方法
        print("status is dismissed");
        //controller.forward();
      } else if (status == AnimationStatus.forward) {
        print("status is forward");
        //執行 controller.forward() 會回調此狀态
      } else if (status == AnimationStatus.reverse) {
        //執行 controller.reverse() 會回調此狀态
        print("status is reverse");
      }
    });

      

執行動畫的view

//漸變動畫
  Widget buildSlideTransition() {
    return Center(
      child: FadeTransition(
        opacity: controller,
        //将要執行動畫的子view
        child: Container(
          width: 200,
          height: 200,
          color: Colors.grey,
          child: Image.network(
            "http://img5.duitang.com/uploads/item/201411/16/20141116124947_xBNxM.jpeg",
          ),
        ),
      ),
    );
  }
      

開始動畫

//動畫開始
controller.forward();
      

@override
  void dispose() {
    super.dispose();
    controller.dispose();
  }