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

最新推荐文章于 2024-05-21 21:49:43 发布

早起的年轻人

最新推荐文章于 2024-05-21 21:49:43 发布

阅读量2.2k

点赞数 1

分类专栏： Flutter项目开发全套教程文章标签： AnimatedOpacity Flutter动画 Flutter透明动画 Flutter渐变动画

本文链接：https://blog.csdn.net/zl18603543572/article/details/108065328

版权

Flutter项目开发全套教程专栏收录该内容

264 篇文章 381 订阅

订阅专栏

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

在这里插入图片描述

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

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

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