Flutter透明度渐变动画Opacity实现透明度渐变动画效果

题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。

**你可能需要
CSDN网易云课堂教程
掘金EDU学院教程
知乎Flutter系列文章

在Flutter 中实现透明度渐变效果的方式可通过以下

在这里插入图片描述

本文章将实现通过 Opacity 组件来 实现透明度渐变动画效果,实现效果如下

在这里插入图片描述
在Flutter 中 Opacity 组件用来设置子 Widget 的透明度,Opacity 的属性 opacity 是用来配置透明度的,取值范围为 0.0~1.0 ,0.0 为完全透明 ,1.0这不透明 , 基本使用代码如下:

  Opacity buildOpacity() {
    return Opacity(
      ///当前的透明度
      opacity: 0.8,
      ///子Widget
      child: Container(
        height: 220.0,
        width: 220.0,
        color: Colors.blue,
      ),
    );
  }

在这里通过 Opacity 组件实现透明度过渡的思路是来源于动态修改 opacity 值而达到的变化
动画效果,所以这里结合了一个 AnimationController 来控制变化曲线使用,代码如下:

class AnimatedOpacityPage2 extends StatefulWidget {
  @override
  _AnimatedOpacityPageState createState() => _AnimatedOpacityPageState();
}

class _AnimatedOpacityPageState extends State<AnimatedOpacityPage2> with TickerProviderStateMixin {
  ///当前页面显示组件的透明度
  double opacityLevel = 0.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("透明度动画"),
      ),
      ///线性布局将透明组件与滑块上下排列
      body: Column(
        ///子组件顶部对齐
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          ///构建透明组件
          Opacity(
		      ///当前的透明度
		      opacity: opacityLevel,
		      ///子Widget
		      child: Container(
		        height: 220.0,
		        width: 220.0,
		        color: Colors.blue,
		      ),
		   ),
        ],
      ),
    );
  }
  }


在这里声明了一个 AnimationController 来动态的控制 透明度动态变化规律,一般在 initState 初始化函数中进行创建,代码如下):


  //动画控制器
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    ///在这里 controller 的值在2秒内从0过渡到1
    controller = AnimationController(
        ///duration 为正向执行动画的时间
        duration: Duration(seconds: 2),
        ///反向执行动画的时间
        reverseDuration: Duration(milliseconds: 3000),
        ///controller的变化的最小值
        lowerBound: 0.0,
        ///controller变化的最大值
        upperBound: 1.0,
        ///绑定页面的Ticker
        vsync: this);
        
    ///添加动画实时更新监听
	controller.addListener(() {
	      ///获取AnimationController执行的值
	      opacityLevel = controller.value;
	      setState(() {});
	 });
}

 ... ... 省略
}

然后在点击按钮时开始动画 如下:

 RaisedButton(
     child: Text('正向开启动画'),
     onPressed: () {
        ///重置动画
     controller.reset();
       ///向前执行
     controller.forward();
    },
),

通过 forward 正向开启动画 ,是从 0.0 ~ 1.0 的过程,是由不透明变为透明的过渡,然后再由1.0~0.0 是由不透明变为透明的过渡 ,反向执行一下就可以,代码如下:

 RaisedButton(
    child: Text('反向开启动画'),
      onPressed: () {
      ///反向前执行
      controller.reverse();
     },
   )

完毕

公众号 我的大前端生涯

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:设计师小姐姐 返回首页