在程序設(shè)計(jì)的理念中，講究一切都來(lái)源于物理世界，在現(xiàn)實(shí)世界中，人們?cè)诿拷佑|到一個(gè)新的事物或者說(shuō)在手指觸碰到一個(gè)事物時(shí)，總是心里默許期望有一個(gè)反饋效果，這就是來(lái)源于心底深處常常被人忽略的一個(gè)潛在期望。

在程序的世界中，在頁(yè)面未加載出數(shù)據(jù)時(shí)，給出一個(gè)閃光過(guò)度動(dòng)畫，可以間接的滿足使用都心底那一點(diǎn)點(diǎn)潛在的欲望需求。

實(shí)現(xiàn)閃光過(guò)渡動(dòng)畫效果如下：

在Flutter開發(fā)中，小編以將這個(gè)效果封裝成一個(gè)FlashAnimation組件，直接使用flash_animation依賴庫(kù)就可實(shí)現(xiàn)這個(gè)效果。

實(shí)際項(xiàng)目首先是引用依賴，通過(guò)pub倉(cāng)庫(kù)添加依賴，代碼如下：最新版本查看這里

dependencies:
flash_animation: ^0.0.1

或者是通過(guò) github?點(diǎn)擊查看github方式添加依賴，代碼如下：

dependencies:
drag_container:
git:
url: https://github.com/zhaolongs/flash_animation.git ref: master

然后加載依賴，代碼如下：

flutter pub get

然后在使用的地方導(dǎo)包，代碼如下：

import 'package:flash_animation/flash_animation.dart';

然后就可以使用 FlashAnimation 閃光動(dòng)畫(亮光過(guò)渡)。

2 使用 FlashAnimation 實(shí)現(xiàn)亮光過(guò)渡動(dòng)畫

class FlashAnimationPage extends StatefulWidget { @override _FlashAnimationPageState createState() => _FlashAnimationPageState();}class _FlashAnimationPageState extends State<FlashAnimationPage> { ///閃光動(dòng)畫控制器 FlashAnimationController flashAnimationController = new FlashAnimationController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("閃光動(dòng)畫"), ), backgroundColor: Colors.white, ///執(zhí)行亮光動(dòng)畫過(guò)渡的Widget body: buildContentWidget(), ///按鈕控制動(dòng)畫的開始與結(jié)束 floatingActionButton: buildActionButton(), ); } buildContentWidget() { return Container( ///填充父布局 width: double.infinity, ///內(nèi)邊距設(shè)置 padding: EdgeInsets.all( 16.0), ///通過(guò)靜態(tài)函數(shù)來(lái)構(gòu)建 FlashAnimation child: FlashAnimation.fromColors( ///動(dòng)畫控制器 flashAnimationController: flashAnimationController, ///循環(huán)次數(shù) 默認(rèn)為 0 無(wú)限循環(huán) animationLoopCount: 0, ///底色 normalColor: Colors.grey[400], ///亮色 highlightColor:Colors.grey[200], ///開啟動(dòng)畫 animationStart: true, ///執(zhí)行動(dòng)畫的子Widget ///這里是一個(gè)Widget類型，也就是可以使用任意的Widget ///[ListPlacholderWidget] child: ListPlacholderWidget(), ), ); } ///默認(rèn)動(dòng)畫是打開狀態(tài) bool isOpen = true; ///右下角的按鈕 buildActionButton() { return FloatingActionButton( child: Icon(isOpen?Icons.close:Icons.open_in_browser), onPressed: () { isOpen = !isOpen; if(isOpen){ ///打開動(dòng)畫 flashAnimationController.start(); }else{ ///關(guān)閉動(dòng)畫 flashAnimationController.stop(); } setState(() { }); }, ); }}

對(duì)于ListPlacholderWidget組件，是小編封裝到依賴庫(kù)中的一個(gè)列表占位樣式，為便捷開發(fā)提供，后續(xù)會(huì)有更多默認(rèn)占位的布局發(fā)布局。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。