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

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

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

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

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

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

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

Flutter透明度渐变动画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();
     },
   )

完毕

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

上一篇:postgresql 定时收集表和索引统计信息


下一篇:postgresql 优化 order by 对索引使用的影响