Flutter 实现小姐姐渐现动画效果

2022 年 7 月 12 日
本文字数：2363 字
阅读完需：约 8 分钟

前言

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

实现代码如下：

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

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/01f2f7c4a3586f89eabd1fd11】。文章转载请联系作者。

岛上码农

关注

用代码连接孤岛，公众号@岛上码农 2022.03.03 加入

从南漂到北，从北漂到南的业余码农

发布

暂无评论

创作场景

Flutter 实现小姐姐渐现动画效果

前言

AnimatedOpacity 简介

AnimatedOpacity 应用

图片渐现过渡

总结

岛上码农

评论