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

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

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

在这里插入图片描述

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

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

在这里插入图片描述
如上图所示效果,其实使用 AnimatedOpacity 组件就可简单的实现,代码如下:

 ///当前页面显示组件的透明度
  double opacityLevel = 1.0;

  ///构建透明动画组件[AnimatedOpacity]
  AnimatedOpacity buildAnimatedOpacity() {
    return AnimatedOpacity(
      ///透明度
      opacity: opacityLevel,
      ///过渡时间
      duration: Duration(milliseconds: 2000),
      ///动画插值器
      curve: Curves.linear,
      ///动画过渡完毕的回调
      onEnd: () {},
      ///子Widget
      child: Container(
        color: Colors.red,
      ),
    );
  }

使用 AnimatedOpacity 组件时,当配置的 opacityLevel 透明度属性发生变化并且调用了 setState方法后,AnimatedOpacity 组件会通过 透明度渐变的方式 将子 Widget 在配置的 Duration 时间内动态的过渡 ,如 由 1.0 变为 0.0 ,AnimatedOpacity 修饰的 子 Widget 的透明度会由 1.0 在配置的 Duration 时间内 慢慢的过渡到 0.0 ,而不是一下子就过渡到了 0.0 ,呈现出一个视觉上透明渐变的效果。

AnimatedOpacity 是一个轻量级的实现渐变动画效果的组件,实际应用场景如视频播放页面,点击视频页面渐变方式显示 暂停按钮,然后延时一会再以渐变的方式隐藏。

上述图片中的完整代码如下所示:

///透明渐变动画效果实现
class AnimatedOpacityPage extends StatefulWidget {
  @override
  _AnimatedOpacityPageState createState() => _AnimatedOpacityPageState();
}

class _AnimatedOpacityPageState extends State<AnimatedOpacityPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("透明度动画"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
            height: 120.0,
            width: 120.0,
            ///背景
            color: Colors.blue[50],
            child: buildAnimatedOpacity(),
          ),


          RaisedButton(
            child: Text('修改透明度'),
            onPressed: () {
              setState(() => opacityLevel = opacityLevel == 0 ? 1.0 : 0.0);
            },
          ),

        ],
      ),
    );
  }

  ///当前页面显示组件的透明度
  double opacityLevel = 1.0;

  ///构建透明动画组件[AnimatedOpacity]
  AnimatedOpacity buildAnimatedOpacity() {
    return AnimatedOpacity(
      ///透明度
      opacity: opacityLevel,
      ///过渡时间
      duration: Duration(milliseconds: 2000),
      ///动画插值器
      curve: Curves.linear,
      ///动画过渡完毕的回调
      onEnd: () {},
      ///子Widget
      child: Container(
        color: Colors.red,
      ),
    );
  }
}


完毕

公众号 我的大前端生涯

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