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

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

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

在这里插入图片描述

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

完毕

公众号我的大前端生涯

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

猜你喜欢