flutter AnimatedOpacity 渐变组件浅析

---

前言

AnimatedOpacity 是flutter 众多动画组件中可以实现渐入渐出的组件，在很多时候，它可以实现一些绚丽的效果。

---

一、AnimatedOpacity 属性

AnimatedOpacity 用于动态展示组件的透明度。它实现的是将其子组件的透明度动态地从初始值过渡到指定值的动画效果。
先来看一下它的源码：

  const AnimatedOpacity({
    
    
    super.key,
    this.child,    // 要控制透明度的子组件
    required this.opacity,   // 透明度，0 ~ 1 直接
    super.curve,   // 动画曲线，默认是线性的Curves.linear，可以使用 Curves 来构建曲线效果
    required super.duration,   // 动画时间
    super.onEnd,   // 动画结束的回调方法
    this.alwaysIncludeSemantics = false, // 是否总是包含语义信息，默认是 false。这个主要是用于辅助访问的，如果是 true，则不管透明度是多少，都会显示语义信息（可以辅助朗读），这对于视障人员来说会更友好。
  })

二、AnimatedOpacity 使用

上面简单的说明了一些 AnimatedOpacity 的相关属性，现在我们来使用一下

          Center(
            child: Stack(children: [
              Text("我能变图片哦"),
              AnimatedOpacity(
                opacity: _opacity,
                duration: const Duration(seconds: 3),
                curve: Curves.easeInOut,
                child: Image.asset(
                  "assets/images/back_img.png",
                  width: 200,
                  height: 200,
                  fit: BoxFit.cover,
                ),
              ),
            ]),
          ),

上面的代码，主要功能就是，在点击按钮，图片会慢慢消失，然后文字会展示出来

当然，我们也可以直接AnimatedOpacity 组件，然后单独控制里面的图片，这样在一个图片消失的时候，会出现另外一张图片，就可以实现酷炫的效果了，具体的各位可以试一下。

---

总结

Flutter 自带的渐现动画组件 AnimatedOpacity 的使用，借助 AnimatedOpacity 可以简化渐现动画的实现，比如一个组件的消失动画，两张图片的渐现切换过渡等效果。