在程序設計的理念中，講究一切都來源于物理世界，在現實世界中，人們在每接觸到一個新的事物或者說在手指觸碰到一個事物時，總是心里默許期望有一個反饋效果，這就是來源于心底深處常常被人忽略的一個潛在期望。

在程序的世界中，在頁面未加載出數據時，給出一個閃光過度動畫，可以間接的滿足使用都心底那一點點潛在的欲望需求。

實現閃光過渡動畫效果如下：

在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組件，是小編封裝到依賴庫中的一個列表占位樣式，為便捷開發提供，后續會有更多默認占位的布局發布局。

總結

以上是生活随笔為你收集整理的flash一个按钮控制动画_flutter闪屏过渡动画，闪光占位动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。