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

---

完毕