持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

AnimatedOpacity

Flutter 的动画控制类，相信大家对动画也有了一定的了解，可以通过这些基础的动画控制类实现自己想要的动画效果。在 Flutter 中也提供了一些封装好的动画组件，以便我们快速应用。本篇我们来介绍渐现效果 ——Opacity和AnimatedOpacity。

顾名思义，AnimatedOpacity 就是用于动态展示组件的透明度。实际上，它实现的是将其子组件的透明度动态地从初始值过渡到指定值的动画效果。AnimatedOpacity的构造方法如下：

const AnimatedOpacity({
  Key? key,
  this.child,
  required this.opacity,
  Curve curve = Curves.linear,
  required Duration duration,
  VoidCallback? onEnd,
  this.alwaysIncludeSemantics = false,
})

对应的参数为：

child：要控制透明度的子组件；
opacity：最终的透明度值，需要是介于0-1之间的值；
curve：动效曲线，默认是线性的Curves.linear，可以使用 Curves 来构建曲线效果；
duration：动效时长；
alwaysIncludeSemantics：是否总是包含语义信息，默认是 false。这个主要是用于辅助访问的，如果是 true，则不管透明度是多少，都会显示语义信息（可以辅助朗读），这对于视障人员来说会更友好。
onEnd：动画结束回调方法。

AnimatedOpacity 应用

应用来说就很简单了，只需要把需要渐现的组件作为 AnimatedOpacity 的子组件，然后在发生事件到时候更改透明度即可。我们实现下面的图片渐现效果。

实现代码如下：

class AnimatedOpacityDemo extends StatefulWidget {
  const AnimatedOpacityDemo({Key? key}) : super(key: key);

  @override
  _AnimatedOpacityDemoState createState() => _AnimatedOpacityDemoState();
}

class _AnimatedOpacityDemoState extends State<AnimatedOpacityDemo> {
  var opacity = 0.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedOpacity 动画'),
      ),
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            Text('小姐姐在哪'),
            AnimatedOpacity(
              duration: Duration(seconds: 3),
              opacity: opacity,
              child: ClipOval(
                child: Image.asset(
                  'images/beauty.jpeg',
                  width: 300,
                  height: 300,
                ),
              ),
              curve: Curves.ease,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text(
          opacity == 0 ? 'Show' : 'Hide',
          style: TextStyle(
            color: Colors.white,
          ),
          textAlign: TextAlign.center,
        ),
        onPressed: () {
          setState(() {
            opacity = opacity == 0 ? 1.0 : 0.0;
          });
        },
      ),
    );
  }
}

图片渐现过渡

在相册类应用中，我们经常会看到一张图片逐渐渐变为另一张图片，从而提供更好的图片浏览体验，甚至造成一种时光如梭的感觉。这种效果可以使用 AnimatedOpactity 实现。将一张图片的透明度逐渐降低到0，另一张的透明度逐渐升高到1，从而可以实现图片渐变过渡的效果，例如下面的效果，是不是感觉小姐姐由清纯风变成高冷风的过渡更自然？

实现的方式其实就是使用 Stack将两张图片堆叠在一起，然后让两张图片的透明度往相反的方向变化就可以实现这样的效果了，代码如下：

class _SwtichImageDemoState extends State<SwtichImageDemo> {
  var opacity1 = 1.0;
  var opacity2 = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('图片切换'),
        brightness: Brightness.dark,
        backgroundColor: Colors.black,
      ),
      backgroundColor: Colors.black,
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            AnimatedOpacity(
              duration: Duration(milliseconds: 5000),
              opacity: opacity1,
              child: ClipOval(
                child: Image.asset(
                  'images/beauty.jpeg',
                  width: 300,
                  height: 300,
                ),
              ),
              curve: Curves.ease,
            ),
            AnimatedOpacity(
              duration: Duration(milliseconds: 5000),
              opacity: opacity2,
              child: ClipOval(
                child: Image.asset(
                  'images/beauty2.jpeg',
                  width: 300,
                  height: 300,
                ),
              ),
              curve: Curves.ease,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text(
          '变',
          style: TextStyle(
            color: Colors.white,
          ),
          textAlign: TextAlign.center,
        ),
        onPressed: () {
          setState(() {
            opacity1 = 0.0;
            opacity2 = 1.0;
          });
        },
      ),
    );
  }
}

视图移除和占位

Flutter中移除一个控件非常容易，只需要在重新创建中移除即可，如果想要移除控件同时它的位置依然保留，类似于Android中View的invisible，比如Row中有3个颜色块，分别为1、2、3，代码如下：

Row(
 
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          height: 80,
          width: 80,
          color: Colors.red,
          alignment: Alignment.center,
          child: Text('1',style: TextStyle(color: Colors.white),),
        ),
        Container(
          height: 80,
          width: 80,
          color: Colors.green,
          alignment: Alignment.center,
          child: Text('2',style: TextStyle(color: Colors.white),),
        ),
        Container(
          height: 80,
          width: 80,
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text('3',style: TextStyle(color: Colors.white),),
        ),
      ],
    )

图片.png

这时想要移除2，同时还保留2的位置，可以使用Opacity控件实现，代码如下：

Opacity(
 
      opacity: 0.0,
      child:  Container(
        height: 80,
        width: 80,
        color: Colors.green,
        alignment: Alignment.center,
        child: Text('2',style: TextStyle(color: Colors.white),),
      ),
    )

使用Opacity控件和另一个控件层叠在一起，将会出现“蒙层效果”：

Stack(
 
      children: <Widget>[
        Image.network(
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582204321233&di=ac7e8572222e1781cef5ad3add4daead&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn15%2F275%2Fw640h435%2F20181010%2Fcaba-hkrzvkw4936632.jpg',
        ),
        Positioned.fill(
          child: Opacity(
            opacity: 0.5,
            child: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [Colors.white, Colors.blue],
                    begin: Alignment.bottomCenter,
                    end: Alignment.topCenter),
              ),
            ),
          ),
        ),
      ],
    )

图片.png

甚至我们可以使用AnimatedOpacity控件实现动画效果:

bool click = false;
 
AnimatedOpacity(
      onEnd: () {
        setState(() {
          click = !click;
        });
      },
      duration: Duration(seconds: 3),
      opacity: click ? 0.2 : 0.8,
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.white, Colors.grey],
          ),
        ),
      ),
    )

图片.png

您可以使用曲线属性控制动画随时间变化的速率。

Curves.easeInOut：开始缓慢，加速，然后缓慢结束
**Curves.bounceInOut：**幅度先增大后缩小
Curves.elasticInOut：在超出范围时增长然后缩小

总结

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

4、Flutter Widgets 之 AnimatedOpacity和Opacity

AnimatedOpacity

AnimatedOpacity 应用

图片渐现过渡

视图移除和占位

总结