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

发布时间:2022-03-24 09:14:25 作者:iii
来源:亿速云 阅读:297

今天小编给大家分享一下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,
})

对应的参数为:

AnimatedOpacity 应用

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

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

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

小姐姐风格变化.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实现图片渐现动画”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

推荐阅读:
  1. flutter PositionedTransition实现缩放动画
  2. Flutter进阶之实现动画效果(十)

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

flutter animatedopacity

上一篇:Vue3中toRef与toRefs的区别是什么

下一篇:Python编程中内置的NotImplemented类型怎么使用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》