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

题记

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

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

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

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

本文章将实现通过 FadeTransition 实现透明度渐变动画效果，实现效果如下

如上图所示效果，使用 FadeTransition 组件就的实现代码如下：

///构建渐变动画[FadeTransition]
  Widget buildSlideTransition() {
    ///实现透明渐变动画
    return FadeTransition(
      ///过渡
      opacity: controller,
      //将要执行动画的子view
      child: Container(
        width: 200,
        height: 200,
        color: Colors.red,
      ),
    );
  }
           

使用 FadeTransition 组件时，opacity 配置的是FadeTransition组件的透明度，在这里

opacity 属性配置的是 Animation 类型。

AnimationController 继承于 Animation，所以在这里声明了一个 AnimationController 来动态的控制 透明度动态变化规律。

一般在 initState 初始化函数中进行创建，创建 AnimationController 时需要绑定一个 Ticker 来实现动画刷新帧监听，所以一般 with TickerProviderStateMixin，代码如下（代码清单1-2）：

///代码清单 1-2 
class _FadeTransitionPageState extends State
    with TickerProviderStateMixin {
  //动画控制器
  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);
}

 ... ... 省略
}           

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

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

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

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

完毕