阅读 481

Flutter 入门与实战(九十五):小姐姐渐现效果 —— AnimatedOpacity 使用

小知识,大挑战!本文正在参与「程序员必备小知识」创作活动。

前言

我们介绍了几篇 Flutter 的动画控制类,相信大家对动画也有了一定的了解,可以通过这些基础的动画控制类实现自己想要的动画效果。在 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 的使用,借助 AnimatedOpacity 可以简化渐现动画的实现,比如一个组件的消失动画,两张图片的渐现切换过渡等效果。

我是岛上码农,微信公众号同名,这是Flutter 入门与实战的专栏文章,提供体系化的 Flutter 学习文章。对应源码请看这里:Flutter 入门与实战专栏源码。如有问题可以加本人微信交流,微信号:island-coder。觉得有收获请按如下方式给个爱心三连

👍🏻:点个赞鼓励一下!

🌟:收藏文章,方便回看哦!

💬:评论交流,互相进步!

文章分类
Android
文章标签