flutter闪屏过渡动画,闪光占位动画
Posted 我的大前端生涯
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flutter闪屏过渡动画,闪光占位动画相关的知识,希望对你有一定的参考价值。
在程序设计的理念中,讲究一切都来源于物理世界,在现实世界中,人们在每接触到一个新的事物或者说在手指触碰到一个事物时,总是心里默许期望有一个反馈效果,这就是来源于心底深处常常被人忽略的一个潜在期望。
在程序的世界中,在页面未加载出数据时,给出一个闪光过度动画,可以间接的满足使用都心底那一点点潜在的欲望需求。
实现闪光过渡动画效果如下:
在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 {
_FlashAnimationPageState createState() => _FlashAnimationPageState();
}
class _FlashAnimationPageState extends State<FlashAnimationPage> {
///闪光动画控制器
FlashAnimationController flashAnimationController =
new FlashAnimationController();
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组件,是小编封装到依赖库中的一个列表占位样式,为便捷开发提供,后续会有更多默认占位的布局发布局。
以上是关于flutter闪屏过渡动画,闪光占位动画的主要内容,如果未能解决你的问题,请参考以下文章