flash一个按钮控制动画_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 {  @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组件，是小编封装到依赖库中的一个列表占位样式，为便捷开发提供，后续会有更多默认占位的布局发布局。