Flutter使用AnimatedOpacity实现图片渐现动画

目录
  • 前言
  • AnimatedOpacity 简介
  • 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使用AnimatedOpacity实现图片渐现动画的详细内容,更多关于Flutter图片渐现动画的资料请关注我们其它相关文章!

(0)

相关推荐

  • 在Flutter中制作翻转卡片动画的完整实例代码

    目录 前言 使用自写代码 预览 完整代码 使用第三个插件 编码 结论 前言 本文将带您了解在 Flutter 中制作翻转卡片动画的两个完整示例.第一个示例从头开始实现,第二个示例使用第三方包.闲话少说,让我们动手吧. 使用自写代码 本示例使用变换小部件创建翻转卡片效果. 预览 我们将要构建的演示应用程序显示了两张隐藏一些秘密的卡片.您可以通过按"揭示秘密" 按钮来揭开面具背后的东西.最上面的卡片展示了一个水平翻转动画,底部一张展示了一个垂直翻转动画. 完整代码 // main.dart

  • Flutter Animation实现缩放和滑动动画效果

    本文实例为大家分享了Flutter Animation实现缩放和滑动动画的具体代码,供大家参考,具体内容如下 Animation对象是Flutter动画库中的一个核心类,它生成指导动画的值.Animation对象知道动画的当前状态(例如,它是开始.停止还是向前或向后移动),但它不知道屏幕上显示的内容.AnimationController管理Animation.CurvedAnimation 将过程抽象为一个非线性曲线.Tween在正在执行动画的对象所使用的数据范围之间生成值.例如,Tween可

  • Flutter实战教程之酷炫的开关动画效果

    前言 此动画效果是我在浏览文章时发现的一个非常酷炫的效果,于是就使用 Flutter 实现了. 更多动画效果及Flutter资源: https://github.com/781238222/flutter-do 添加依赖 在项目的 pubspec.yaml 文件中添加依赖: dependencies: wheel_switch: ^0.0.1 执行命令: flutter pub get 使用 WheelSwitch( value: false, ) 组件默认的宽高分别是80.30,也可以指定宽高

  • Flutter 使用fluro的转场动画进行页面切换

    在 fluro 中,定义路由处理器 Handler 时可以指定该页面的默认转场形式,或者在使用 navigateTo 方法是可以设置页面跳转transition参数来设定个性化的转场形式.本篇演示了fluro 内置的转场动画,效果如下图所示. 转场形式 fluro 的转场形式通过 TransitionType枚举定义,如下所示: enum TransitionType { native, //原生形式,和原生的保持一致,默认 nativeModal, //原生模态跳转 inFromLeft, /

  • flutter FadeTransition实现透明度渐变动画

    本文实例为大家分享了flutter实现透明度渐变动画的具体代码,供大家参考,具体内容如下 flutter 动画状态监听器 AnimationController //动画控制器 AnimationController controller; //AnimationController是一个特殊的Animation对象,在屏幕刷新的每一帧,就会生成一个新的值, // 默认情况下,AnimationController在给定的时间段内会线性的生成从0.0到1.0的数字 //用来控制动画的开始与结束以

  • Flutter使用AnimatedSwitcher实现场景切换动画

    目录 前言 AnimatedSwitcher 介绍 应用 总结 前言 在应用中,我们经常会遇到切换组件的场景,比如点击一个按钮后,将当前的图片为另一张图片:或者是翻转卡片,显示卡片详情.在 Flutter 中提供了 AnimatedSwitcher 这个动画组件来实现页面内的场景切换. AnimatedSwitcher.gif AnimatedSwitcher 介绍 AnimatedSwitcher 通过动效完成其子组件的切换,默认的效果是 FadeTransition.当其子组件发生改变的时候

  • 利用Flutter实现“孔雀开屏”的动画效果

    前言 今天分享一个类似"孔雀开屏"的动画效果,打开新的页面时,新的页面从屏幕右上角以圆形逐渐打开到全屏. 先来看下具体的效果 不知道这种效果大家叫什么名字?如果有更合适的名字可以在评论处告诉我,下面来说下如何实现此效果. 在使用Navigator进入一个新的页面时,通常用法如下: Navigator.of(context).push(MaterialPageRoute( builder: (context){ return PageB(); } )); MaterialPageRout

  • Flutter使用AnimatedOpacity实现图片渐现动画

    目录 前言 AnimatedOpacity 简介 AnimatedOpacity 应用 图片渐现过渡 总结 前言 我们介绍了几篇 Flutter 的动画控制类,相信大家对动画也有了一定的了解,可以通过这些基础的动画控制类实现自己想要的动画效果.在 Flutter 中也提供了一些封装好的动画组件,以便我们快速应用.本篇我们来介绍渐现效果 —— AnimatedOpacity. AnimatedOpacity 简介 顾名思义,AnimatedOpacity 就是用于动态展示组件的透明度.实际上,它实

  • Android使用自定义View绘制渐隐渐现动画

    实现了一个有趣的小东西:使用自定义View绘图,一边画线,画出的线条渐渐变淡,直到消失.效果如下图所示: 用属性动画或者渐变填充(Shader)可以做到一笔一笔的变化,但要想一笔渐变(手指不抬起边画边渐隐),没在Android中找到现成的API可用.所以,自己做了一个. 基本的想法是这样的: 在View的onTouchEvent中记录触摸点,生成一条一条的线LineElement,放在一个List中.给每个LineElement配置一个Paint实例. 在onDraw中绘制线段. 变换LineE

  • Android实现游戏中的渐隐和渐现动画效果

    1实现渐隐的动画 在程序中实现可以通过如下方式 View view = new View(context);//执行动画的View AlphaAnimation aa = new AlphaAnimation(1.0f, 0.0f);//创建一个AlphaAnimation 对象,渐变从1->0 aa.setDuration(1500);//设置持续时间 aa.setFillAfter(true);//设置这个View最后的状态,由于是从1->0,所以最后的是消失状态(最后是看不到见这个Vie

  • Android开启动画之渐隐渐现效果

    启动某项程序时我们往往都能看到不同的"开机动画",千变万化的动画也只不过是四种基本动画衍变美化而成的. 四种android动画效果: alpha        渐变透明度动画效果 scale        渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate        画面转移旋转动画效果 最简单的莫过于渐变透明效果,单单这一种就可完成渐隐渐现的动画效果(用于渐现渐隐的可以是整个欢迎页面也可以是欢迎页面里的一部分): 1). 在res里新建anim文件夹

  • js学习总结_轮播图之渐隐渐现版(实例讲解)

    具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; -webkit-user-select:none; } ul,li{ list-style } im

  • Android Flutter实现五种酷炫文字动画效果详解

    目录 前言 波浪涌动效果 波浪线跳动文字组 彩虹动效 滚动广告牌效果 打字效果 其他效果 自定义效果 总结 前言 偶然逛国外博客,看到了一个介绍文字动画的库,进入 pub 一看,立马就爱上这个动画库了,几乎你能想到的文字动画效果它都有!现在正式给大家安利一下这个库:animated_text_kit.本篇我们介绍几个酷炫的效果,其他的效果大家可以自行查看官网文档使用. 波浪涌动效果 波浪涌动 上面的动画效果只需要下面几行代码,其中loadUntil用于控制波浪最终停留的高度,取值是0-1.0,如

  • jQuery实现打开页面渐现效果示例

    本文实例讲述了jQuery实现打开页面渐现效果的方法.分享给大家供大家参考,具体如下: 思路:把页面中所有的标签放到一个div中,然后再在最后添加一个空div标签fadeDiv,用fadeDiv遮挡body使fadeDiv渐现 <head> <title></title> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> &

  • js实现图片切换(动画版)

    学习了妙味课堂的图片切换(动画版) 这个小效果相对简单一点. 知识预备: [1]background-position-x background-position属性设置背景原图像(由 background-image 定义)的位置,意味着使用这个属性的前提是必须设置背景原图像background-image. background-position有两个属性值, background-position:x | y,用法上可以对其一个属性单独使用 background-position-x 和

  • js模拟滤镜的图片渐显效果

    无标题文档 #pshow{margin:auto;width:180px;height:137px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);} /*ImageChange Start*/ var changeTime=2000,gradechangeTime=100,changeSpeed=10,imageCounter=4,nowImage,startOpacity; var imageLink=new Array

  • jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)

    本文实例讲述了jQuery实现的给图片点赞+1动画效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

随机推荐