flutter闪屏过渡动画，闪光占位动画

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

重要消息

网易云【玩转大前端】配套课程
EDU配套教程
Flutter开发的点滴积累系列文章

实现的效果

1 添加依赖

小编以将这个效果封装成一个FlashAnimation组件，直接使用flash_animation依赖库就可实现这个效果

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

  dependencies:flash_animation: ^0.0.1

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

dependencies:drag_container:git:url: https://github.com/zhaolongs/flash_animation.gitref: 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();@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("闪光动画"),),backgroundColor: Colors.white,///执行亮光动画过渡的Widgetbody: buildContentWidget(),///按钮控制动画的开始与结束floatingActionButton: buildActionButton(),);}buildContentWidget() {return Container(///填充父布局width: double.infinity,///内边距设置padding: EdgeInsets.all( 16.0),///通过静态函数来构建 FlashAnimationchild: 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组件，是小编封装到依赖库中的一个列表占位样式，为便捷开发提供，后续会有更多默认占位的布局发布局。

完毕

flutter闪屏过渡动画，闪光占位动画相关推荐

flash一个按钮控制动画_flutter闪屏过渡动画，闪光占位动画
在程序设计的理念中,讲究一切都来源于物理世界,在现实世界中,人们在每接触到一个新的事物或者说在手指触碰到一个事物时,总是心里默许期望有一个反馈效果,这就是来源于心底深处常常被人忽略的一个潜在期望. 在 ...
Flutter 项目的闪屏页方案
前言在APP项目中闪屏页(或启动页)的作用是为了解决在程序显示第一帧之前,不要出现白屏的现象,尤其是在纯RN和Flutter的项目里面,资源加载完成到显示的速度会比Native要逊色一些.这里主要总 ...
主流智能手机屏幕材质介绍及 LCD闪屏现象分析
TN TN(Twisted Nematic) 即扭曲向列型面板,属于有源矩阵液晶显示器中的一种.由于TFT是主动式矩阵LCD可让液晶的排列方式具有记忆性,不会在电流消失后马上恢 ...
TFT模块闪屏（Flicker)现象分析
一.FLICKER FLICKER俗称抬头纹,是我们遇到较多的一种闪屏.理想状态下Vcom的中心值与Vpixel的中心值一致且VpixelH和VpixelL的差值与VcomH和Vcom ...
【SwiftUI模块】0008、SwiftUI-自定义启动闪屏动画-App启动闪屏曲线路径动画
SwiftUI小功能模块系列 0001.SwiftUI自定义Tabbar动画效果 0002.SwiftUI自定义3D动画导航抽屉效果 0003.SwiftUI搭建瀑布流-交错网格-效果 0004.Sw ...
Glide加载gif动画只播放一次的方法 Glide加载gif动画先显示最后一帧再开始播放动画导致闪屏的解决方案
场景: Android App利用ViewPager制作引导页,然后利用Glide加载gif动画. 问题: 1.Glide加载gif动画如何只播放一次? 2.Glide加载gif动画,在viewPag ...
IOS解决闪屏无效LuanchImage启动动画设置加载广告闪屏图
IOS闪屏动画LuanchImage设置无效设置Launch Image无效其它方法转载请标明出处: https://dujinyang.blog.csdn.net/article/detail ...
flutter 点击旋转动画_让动画实现更简单，Flutter 动画简易教程！
Flutter中的动画功能强大且易于使用.接下来通过一个具体的实例,您将学到关于 Flutter 动画的一切. 难度:中级今天,我们无法想象移动应用程序里面没有任何动画,当您从一页跳转到另一页时,或 ...
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )
文章目录 ◯.AnimatedBuilder 引入一.创建动画控制器二.创建动画三.创建动画作用的组件四.创建 AnimatedBuilder 关联动画与组件五.动画运行六.完整代码示例 ...

flutter闪屏过渡动画，闪光占位动画

1 添加依赖

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

flutter闪屏过渡动画，闪光占位动画相关推荐

最新文章

热门文章