flash一个按钮控制动画_flutter闪屏过渡动画,闪光占位动画

在程序设计的理念中,讲究一切都来源于物理世界,在现实世界中,人们在每接触到一个新的事物或者说在手指触碰到一个事物时,总是心里默许期望有一个反馈效果,这就是来源于心底深处常常被人忽略的一个潜在期望。

在程序的世界中,在页面未加载出数据时,给出一个闪光过度动画,可以间接的满足使用都心底那一点点潜在的欲望需求。

实现闪光过渡动画效果如下:

a6d7c653ea203ab4a549961298d44b09.gif

在Flutter开发中,小编以将这个效果封装成一个FlashAnimation组件,直接使用flash_animation依赖库就可实现这个效果。

实际项目首先是引用依赖,通过pub仓库添加依赖,代码如下:最新版本查看这里

dependencies:
flash_animation: ^0.0.1

或者是通过 github 点击查看github方式添加依赖,代码如下:

dependencies:
drag_container:
git:
url: https://github.com/zhaolongs/flash_animation.git ref: master

然后加载依赖,代码如下:

flutter pub get

然后在使用的地方导包,代码如下:

import 'package:flash_animation/flash_animation.dart';

然后就可以使用 FlashAnimation 闪光动画(亮光过渡)。

2 使用 FlashAnimation 实现亮光过渡动画

class FlashAnimationPage extends StatefulWidget {  @override  _FlashAnimationPageState createState() => _FlashAnimationPageState();}class _FlashAnimationPageState extends State<FlashAnimationPage> {  ///闪光动画控制器  FlashAnimationController flashAnimationController =      new FlashAnimationController();  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("闪光动画"),      ),      backgroundColor: Colors.white,      ///执行亮光动画过渡的Widget      body: buildContentWidget(),      ///按钮控制动画的开始与结束      floatingActionButton: buildActionButton(),    );  }  buildContentWidget() {    return Container(      ///填充父布局      width: double.infinity,      ///内边距设置      padding: EdgeInsets.all( 16.0),      ///通过静态函数来构建 FlashAnimation      child: FlashAnimation.fromColors(        ///动画控制器        flashAnimationController: flashAnimationController,        ///循环次数 默认为 0 无限循环        animationLoopCount: 0,        ///底色        normalColor: Colors.grey[400],        ///亮色        highlightColor:Colors.grey[200],        ///开启动画        animationStart: true,        ///执行动画的子Widget        ///这里是一个Widget类型,也就是可以使用任意的Widget        ///[ListPlacholderWidget]        child: ListPlacholderWidget(),      ),    );  }  ///默认动画是打开状态  bool isOpen = true;  ///右下角的按钮  buildActionButton() {    return FloatingActionButton(      child: Icon(isOpen?Icons.close:Icons.open_in_browser),      onPressed: () {        isOpen = !isOpen;        if(isOpen){          ///打开动画          flashAnimationController.start();        }else{          ///关闭动画          flashAnimationController.stop();        }        setState(() {        });      },    );  }}

对于ListPlacholderWidget组件,是小编封装到依赖库中的一个列表占位样式,为便捷开发提供,后续会有更多默认占位的布局发布局。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/538599.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

scala-wordcount

/* * Mapreduce步骤 * 1、map&#xff1a;获取一行 * 2、按空格分隔 * 3、每个单词统计&#xff0c;<key,1> 输出到 reducer * 4、reducer <key,{1,1,1,1,1}> 汇总 * 5、输出结果 */ 1、声明一个集合&#xff0c;模仿要统计的…

动态改变_Excel中如何动态改变可编辑区域?

有这样一个工作场景&#xff1a;我们制作一个工作报表模板给同事填写数据&#xff0c;这个工作表格只可以在预设的可编辑区域编辑&#xff0c;其它都是受密码保护的&#xff0c;而且这个可编辑区域是随着日期——工作周的变化而发生变化的。也就是说在不同的工作周可编辑的区域…

java集合框架之ArrayList与LinkedList的区别

参考http://how2j.cn/k/collection/collection-arraylist-vs-linkedlist/690.html#nowhere ArrayList和LinkedList的区别 ArrayList 插入&#xff0c;删除数据慢LinkedList&#xff0c; 插入&#xff0c;删除数据快ArrayList是顺序结构&#xff0c;所以定位很快&#xff0c;指哪…

python语言是由谁设计并领导开发的_python语言概述 - osc_lt3ocv4d的个人空间 - OSCHINA - 中文开源技术交流社区...

python语言的发展 python语言诞生于1990年&#xff0c;由Guide van Rossum设计并领导开发。 python语言是开源项目的优秀代表&#xff0c;其解释器的全部代码都是开源的。 编写Hello程序 学习编程语言有一个惯例&#xff0c;即运行最简单的Hello程序&#xff0c;该程序功能是在…

Spark集群安装

Spark是独立的&#xff0c;所以集群安装的时候&#xff0c;不像hive&#xff0c;hbase等需要先安装hadoop&#xff0c;除非文件保存在hadoop上&#xff0c;才需要安装hadoop集群。 如果虚拟机安装&#xff0c;点击阅读推荐配置 前提环境&#xff1a; 1、安装了JDK1.7及以上版…

列表逆序排序_【Python自学笔记】集合——列表

list列表类型是一个与元组tuple类似的有序序列。构造函数是list()切片# 切片 fruit ["Apple", "Hawthorn", "Loquat", "Medlar", "Pear", "Quince"] print(fruit[:2]) print(fruit[-1])语法与字符串和元组中的一…

esp8266 阿里云 arduino_NUCLEO-G071RB通过WiFi与NB连接阿里云

开箱体验试用背景去年年初&#xff0c;有新项目要让移动式容器设备的监控数据上云&#xff0c;选型时主要考虑三个系列STM32L0、STM32G0和STM8。最初有意向选用STM32L052RB&#xff0c;主要是为了满足低功耗需求。恰逢G0系列上市&#xff0c;价格亲民&#xff0c;性能却要高很多…

“云上金融,智创未来” 腾讯“云+未来”峰会金融专场在广州举行

5月24日&#xff0c;腾讯“云未来“峰会金融专场在广州举行。来自央行、腾讯公司以及银行、证券、保险、互金公司等腾讯金融云的合作伙伴代表以及行业专家&#xff0c;共同分享了智慧金融、企业数字化转型、腾讯金融云业务布局以及与合作伙伴取得的最新成绩等话题。活动现场&am…

Spark算子reduceByKey深度解析

原文地址&#xff1a;http://blog.csdn.net/qq_23660243/article/details/51435257 -------------------------------------------- 最近经常使用到reduceByKey这个算子&#xff0c;懵逼的时间占据多数&#xff0c;所以沉下心来翻墙上国外的帖子仔细过了一遍&#xff0c;发现一…

绕固定轴分解_3轴 / 5轴 / 3+2到底是什么......??

一、 什么是32定位加工在一个三轴铣削程序执行时&#xff0c;使用五轴机床的两个旋转轴将切削刀具固定在一个倾斜的位置&#xff0c;32加工技术的名字也由此而来&#xff0c;这也叫做定位五轴机床&#xff0c;因为第四个轴和第五个轴是用来确定在固定位置上刀具的方向&#xff…

unix环境高级编程 pdf_UNIX环境高级编程——记录锁

引言在多进程环境下&#xff0c;多个进程同时读写一个文件&#xff0c;如果不进行同步&#xff0c;就可能导致不期待的结果&#xff0c;如后一个进程覆盖了前一个进程写的内容。Unix为此提供了一种强大的解决办法&#xff1a;记录锁记录锁记录锁本质上就是对文件加读写锁&#…

LNMP源码安装脚本

LNMP安装脚本&#xff0c;脚本环境 #LNMP环境搭建centos6.8 2.6.32-696.28.1.el6.x86_64 nginx:1.12.2 mysql:5.6.36 PHP:5.5.36 #!/bin/bash#LNMP环境搭建centos6.8 2.6.32-696.28.1.el6.x86_64 nginx:1.12.2 mysql:5.6.36 PHP:5.5.36trap echo "error line: $LINE…

启动spark shell

spark集群安装教程&#xff1a;http://blog.csdn.net/zengmingen/article/details/72123717 启动spark shell. 在spark安装目录bin文件夹下 ./spark-shell --master spark://nbdo1:7077 --executor-memory 2g --total-executor-cores 2 参数说明&#xff1a; --master spark…

python发送excel文件_Python操作Excel, 开发和调用接口,发送邮件

接口开发&#xff1a; importflaskimporttoolsimportjson,redisimportrandom server flask.Flask(__name__)#新建一个服务&#xff0c;把当前这个python文件当做一个服务 ip 118.24.3.40passwordHK139bc&*r redis.Redis(hostip,passwordpassword,port6379,db10, decode_res…

第一个Spark实例:求PI值

向spark提交jar&#xff0c;需要使用 bin下的spark-submit [hadoopnbdo1 bin]$ ./spark-submit --help Usage: spark-submit [options] <app jar | python file> [app arguments] Usage: spark-submit --kill [submission ID] --master [spark://...] Usage: spark-submi…

go conn 读取byte数组后是否要_【技术推荐】正向角度看Go逆向

Go语言具有开发效率高&#xff0c;运行速度快&#xff0c;跨平台等优点&#xff0c;因此正越来越多的被攻击者所使用&#xff0c;其生成的是可直接运行的二进制文件&#xff0c;因此对它的分析类似于普通C语言可执行文件分析&#xff0c;但是又有所不同&#xff0c;本文将会使用…

Confluence 6 选择一个外部数据库

2019独角兽企业重金招聘Python工程师标准>>> 注意&#xff1a; 选择一个合适的数据库通常需要花费很多时间。同时 Confluence 自带的 XML 数据备份和恢复功能通常也不适合合并和备份有大量数据的数据库。如果你想在系统运行后进行数据合并&#xff0c;你通常需要使用…

spark中saveAsTextFile如何最终生成一个文件

原文地址&#xff1a;http://www.cnblogs.com/029zz010buct/p/4685173.html ----------------------------------------------------------------------- 一般而言&#xff0c;saveAsTextFile会按照执行task的多少生成多少个文件&#xff0c;比如part-00000一直到part-0000n&…

python爬取内容乱码_python爬取html中文乱码

环境&#xff1a; python3.6 爬取代码&#xff1a; import requests url https://www.dygod.net/html/tv/hytv/ req requests.get(url) print(req.text) 爬取结果&#xff1a; / _-如上&#xff0c;title内容出现乱码&#xff0c;自己感觉应该是编码的问题&#xff0c;但是不…

前端每日实战:34# 视频演示如何用纯 CSS 创作在文本前后穿梭的边框

效果预览 按下右侧的“点击预览”按钮可以在当前页面预览&#xff0c;点击链接可以全屏预览。 https://codepen.io/comehope/pen/qYepNv 可交互视频教程 此视频是可以交互的&#xff0c;你可以随时暂停视频&#xff0c;编辑视频中的代码。 请用 chrome, safari, edge 打开观看。…