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

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

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

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

• 通过 AnimatedOpacity 实现 点击查看这里
• 通过 FadeTransition实现点击查看这里
• 透明组件 Opacity 实现 就是本文了
• 通过颜色改变实现透明度渐变效果

本文章将实现通过 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();
     },
   )

---

完毕

扫描二维码关注公众号，回复： 11760486 查看本文章