Flutter中怎么使用AnimatedOpacity实现图片渐现动画

今天小编给大家分享一下Flutter中怎么使用AnimatedOpacity实现图片渐现动画的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

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 的子组件，然后在发生事件到时候更改透明度即可。我们实现下面的图片渐现效果。

透明度渐变.gif

实现代码如下：

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，从而可以实现图片渐变过渡的效果，例如下面的效果，是不是感觉小姐姐由清纯风变成高冷风的过渡更自然？

小姐姐风格变化.gif

实现的方式其实就是使用 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中怎么使用AnimatedOpacity实现图片渐现动画”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。