flutter RotationTransition實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫
本文實(shí)例為大家分享了flutter RotationTransition實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫的具體代碼,供大家參考,具體內(nèi)容如下
flutter 動(dòng)畫狀態(tài)監(jiān)聽(tīng)器
AnimationController
//動(dòng)畫控制器 AnimationController controller; //AnimationController是一個(gè)特殊的Animation對(duì)象,在屏幕刷新的每一幀,就會(huì)生成一個(gè)新的值, // 默認(rèn)情況下,AnimationController在給定的時(shí)間段內(nèi)會(huì)線性的生成從0.0到1.0的數(shù)字 //用來(lái)控制動(dòng)畫的開(kāi)始與結(jié)束以及設(shè)置動(dòng)畫的監(jiān)聽(tīng) //vsync參數(shù),存在vsync時(shí)會(huì)防止屏幕外動(dòng)畫(動(dòng)畫的UI不在當(dāng)前屏幕時(shí))消耗不必要的資源 //duration 動(dòng)畫的時(shí)長(zhǎng),這里設(shè)置的 seconds: 2 為2秒,當(dāng)然也可以設(shè)置毫秒 milliseconds:2000. controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); //動(dòng)畫開(kāi)始、結(jié)束、向前移動(dòng)或向后移動(dòng)時(shí)會(huì)調(diào)用StatusListener controller.addStatusListener((status) { if (status == AnimationStatus.completed) { //動(dòng)畫從 controller.reverse() 反向執(zhí)行 結(jié)束時(shí)會(huì)回調(diào)此方法 print("status is completed"); // controller.reset(); 將動(dòng)畫重置到開(kāi)始前的狀態(tài) //開(kāi)始執(zhí)行 //controller.forward(); } else if (status == AnimationStatus.dismissed) { //動(dòng)畫從 controller.forward() 正向執(zhí)行 結(jié)束時(shí)會(huì)回調(diào)此方法 print("status is dismissed"); //controller.forward(); }else if (status == AnimationStatus.forward) { print("status is forward"); //執(zhí)行 controller.forward() 會(huì)回調(diào)此狀態(tài) }else if (status == AnimationStatus.reverse) { //執(zhí)行 controller.reverse() 會(huì)回調(diào)此狀態(tài) print("status is reverse"); } });
AnimationController 的常用操作說(shuō)明
flutter AnimationStatus 動(dòng)畫狀態(tài)說(shuō)明
1 flutter RotationTransition實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫
//動(dòng)畫控制器 AnimationController controller; //AnimationController是一個(gè)特殊的Animation對(duì)象,在屏幕刷新的每一幀,就會(huì)生成一個(gè)新的值, // 默認(rèn)情況下,AnimationController在給定的時(shí)間段內(nèi)會(huì)線性的生成從0.0到1.0的數(shù)字 //用來(lái)控制動(dòng)畫的開(kāi)始與結(jié)束以及設(shè)置動(dòng)畫的監(jiān)聽(tīng) //vsync參數(shù),存在vsync時(shí)會(huì)防止屏幕外動(dòng)畫(動(dòng)畫的UI不在當(dāng)前屏幕時(shí))消耗不必要的資源 //duration 動(dòng)畫的時(shí)長(zhǎng),這里設(shè)置的 seconds: 2 為2秒,當(dāng)然也可以設(shè)置毫秒 milliseconds:2000. controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); //動(dòng)畫開(kāi)始、結(jié)束、向前移動(dòng)或向后移動(dòng)時(shí)會(huì)調(diào)用StatusListener controller.addStatusListener((status) { if (status == AnimationStatus.completed) { //動(dòng)畫從 controller.forward() 正向執(zhí)行 結(jié)束時(shí)會(huì)回調(diào)此方法 print("status is completed"); } else if (status == AnimationStatus.dismissed) { //動(dòng)畫從 controller.reverse() 反向執(zhí)行 結(jié)束時(shí)會(huì)回調(diào)此方法 print("status is dismissed"); } else if (status == AnimationStatus.forward) { print("status is forward"); //執(zhí)行 controller.forward() 會(huì)回調(diào)此狀態(tài) } else if (status == AnimationStatus.reverse) { //執(zhí)行 controller.reverse() 會(huì)回調(diào)此狀態(tài) print("status is reverse"); } });
執(zhí)行動(dòng)畫的 widget
//旋轉(zhuǎn) Widget buildRotationTransition() { return Center( child: RotationTransition( //設(shè)置動(dòng)畫的旋轉(zhuǎn)中心 alignment: Alignment.center, //動(dòng)畫控制器 turns: controller, //將要執(zhí)行動(dòng)畫的子view child: Container( width: 100, height: 100, color: Colors.grey, ), ), ); } }
2 flutter RotationTransition實(shí)現(xiàn)無(wú)限循環(huán)旋轉(zhuǎn)動(dòng)畫
實(shí)現(xiàn)方法 就是在動(dòng)畫結(jié)束的時(shí)候再開(kāi)啟動(dòng)畫
//動(dòng)畫開(kāi)始、結(jié)束、向前移動(dòng)或向后移動(dòng)時(shí)會(huì)調(diào)用StatusListener controller.addStatusListener((status) { if (status == AnimationStatus.completed) { //動(dòng)畫從 controller.forward() 正向執(zhí)行 結(jié)束時(shí)會(huì)回調(diào)此方法 print("status is completed"); //重置起點(diǎn) controller.reset(); //開(kāi)啟 controller.forward(); } else if (status == AnimationStatus.dismissed) { //動(dòng)畫從 controller.reverse() 反向執(zhí)行 結(jié)束時(shí)會(huì)回調(diào)此方法 print("status is dismissed"); } else if (status == AnimationStatus.forward) { print("status is forward"); //執(zhí)行 controller.forward() 會(huì)回調(diào)此狀態(tài) } else if (status == AnimationStatus.reverse) { //執(zhí)行 controller.reverse() 會(huì)回調(diào)此狀態(tài) print("status is reverse"); } });
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- flutter實(shí)現(xiàn)帶刪除動(dòng)畫的listview功能
- Flutter實(shí)戰(zhàn)教程之酷炫的開(kāi)關(guān)動(dòng)畫效果
- 利用Flutter實(shí)現(xiàn)“孔雀開(kāi)屏”的動(dòng)畫效果
- 如何使用Flutter實(shí)現(xiàn)58同城中的加載動(dòng)畫詳解
- flutter PositionedTransition實(shí)現(xiàn)縮放動(dòng)畫
- flutter FadeTransition實(shí)現(xiàn)透明度漸變動(dòng)畫
- Flutter路由的跳轉(zhuǎn)、動(dòng)畫和傳參詳解(最簡(jiǎn)單)
- Flutter 用自定義轉(zhuǎn)場(chǎng)動(dòng)畫實(shí)現(xiàn)頁(yè)面切換
相關(guān)文章
Android實(shí)現(xiàn)將一個(gè)Activity設(shè)置成窗口樣式的方法
這篇文章主要介紹了Android實(shí)現(xiàn)將一個(gè)Activity設(shè)置成窗口樣式的方法,涉及Android的窗口樣式設(shè)置與布局技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-02-02Android實(shí)現(xiàn)類似iOS分欄控制器
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)類似iOS分欄控制器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03Android實(shí)現(xiàn)支付寶AR掃描動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)支付寶AR掃描動(dòng)畫效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-02-02Android通過(guò)JNI實(shí)現(xiàn)守護(hù)進(jìn)程
這篇文章主要為大家詳細(xì)介紹了Android通過(guò)JNI實(shí)現(xiàn)守護(hù)進(jìn)程的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-09-09詳解Andorid開(kāi)發(fā)中反射機(jī)制是怎么一回事
反射機(jī)制是在運(yùn)行狀態(tài)中,對(duì)于任何一個(gè)類,都可以知道這個(gè)類的所有屬性和方法,對(duì)于任何一個(gè)對(duì)象,都可以調(diào)用它所有的方法和屬性,修改部分類型信息,這種動(dòng)態(tài)獲取信息以及動(dòng)態(tài)調(diào)用對(duì)象方法的功能稱為Java的反射機(jī)制2022-11-11android內(nèi)存優(yōu)化之圖片優(yōu)化
對(duì)圖片本身進(jìn)行操作。盡量不要使用setImageBitmap、setImageResource、BitmapFactory.decodeResource來(lái)設(shè)置一張大圖,因?yàn)檫@些方法在完成decode后,最終都是通過(guò)java層的createBitmap來(lái)完成的,需要消耗更多內(nèi)存2012-12-12Android實(shí)現(xiàn)自動(dòng)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)自動(dòng)輪播圖效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11Android開(kāi)屏頁(yè)倒計(jì)時(shí)功能實(shí)現(xiàn)的詳細(xì)教程
本篇文章主要介紹了Android實(shí)現(xiàn)開(kāi)屏頁(yè)倒計(jì)時(shí)功能實(shí)現(xiàn)的詳細(xì)教程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06Android中AOP的應(yīng)用實(shí)踐之過(guò)濾重復(fù)點(diǎn)擊
這篇文章主要給大家介紹了關(guān)于Android中AOP的應(yīng)用實(shí)踐之過(guò)濾重復(fù)點(diǎn)擊的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)各位Android開(kāi)發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09