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

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

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

在这里插入图片描述

在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();
     },
   )

完毕

公众号 我的大前端生涯

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