欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Flutter UI基础 - FadeTransition实现透明度渐变动画

程序员文章站 2022-07-03 17:50:39
flutter 动画状态监听器AnimationController //动画控制器 AnimationController controller; //AnimationController是一个特殊的Animation对象,在屏幕刷新的每一帧,就会生成一个新的值, // 默认情况下,AnimationController在给定的时间段内会线性的生成从0.0到1.0的数字 //用来控制动画的开始与结束以及设置动画的监听 //vsync参数,存在vs...

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 的常用操作说明

Flutter UI基础 - FadeTransition实现透明度渐变动画

flutter AnimationStatus 动画状态说明

Flutter UI基础 - FadeTransition实现透明度渐变动画

 flutter FadeTransition实现透明度渐变动画

Flutter UI基础 - 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();
  }

 

 

本文地址:https://blog.csdn.net/shanghaibao123/article/details/107495715

相关标签: Flutter