flutter RotationTransition實現(xiàn)旋轉(zhuǎn)動畫
本文實例為大家分享了flutter RotationTransition實現(xiàn)旋轉(zhuǎn)動畫的具體代碼,供大家參考,具體內(nèi)容如下
flutter 動畫狀態(tài)監(jiān)聽器
AnimationController
//動畫控制器 AnimationController controller; //AnimationController是一個特殊的Animation對象,在屏幕刷新的每一幀,就會生成一個新的值, // 默認情況下,AnimationController在給定的時間段內(nèi)會線性的生成從0.0到1.0的數(shù)字 //用來控制動畫的開始與結(jié)束以及設(shè)置動畫的監(jiān)聽 //vsync參數(shù),存在vsync時會防止屏幕外動畫(動畫的UI不在當(dāng)前屏幕時)消耗不必要的資源 //duration 動畫的時長,這里設(shè)置的 seconds: 2 為2秒,當(dāng)然也可以設(shè)置毫秒 milliseconds:2000. controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); //動畫開始、結(jié)束、向前移動或向后移動時會調(diào)用StatusListener controller.addStatusListener((status) { if (status == AnimationStatus.completed) { //動畫從 controller.reverse() 反向執(zhí)行 結(jié)束時會回調(diào)此方法 print("status is completed"); // controller.reset(); 將動畫重置到開始前的狀態(tài) //開始執(zhí)行 //controller.forward(); } else if (status == AnimationStatus.dismissed) { //動畫從 controller.forward() 正向執(zhí)行 結(jié)束時會回調(diào)此方法 print("status is dismissed"); //controller.forward(); }else if (status == AnimationStatus.forward) { print("status is forward"); //執(zhí)行 controller.forward() 會回調(diào)此狀態(tài) }else if (status == AnimationStatus.reverse) { //執(zhí)行 controller.reverse() 會回調(diào)此狀態(tài) print("status is reverse"); } });
AnimationController 的常用操作說明
flutter AnimationStatus 動畫狀態(tài)說明
1 flutter RotationTransition實現(xiàn)旋轉(zhuǎn)動畫
//動畫控制器 AnimationController controller; //AnimationController是一個特殊的Animation對象,在屏幕刷新的每一幀,就會生成一個新的值, // 默認情況下,AnimationController在給定的時間段內(nèi)會線性的生成從0.0到1.0的數(shù)字 //用來控制動畫的開始與結(jié)束以及設(shè)置動畫的監(jiān)聽 //vsync參數(shù),存在vsync時會防止屏幕外動畫(動畫的UI不在當(dāng)前屏幕時)消耗不必要的資源 //duration 動畫的時長,這里設(shè)置的 seconds: 2 為2秒,當(dāng)然也可以設(shè)置毫秒 milliseconds:2000. controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); //動畫開始、結(jié)束、向前移動或向后移動時會調(diào)用StatusListener controller.addStatusListener((status) { if (status == AnimationStatus.completed) { //動畫從 controller.forward() 正向執(zhí)行 結(jié)束時會回調(diào)此方法 print("status is completed"); } else if (status == AnimationStatus.dismissed) { //動畫從 controller.reverse() 反向執(zhí)行 結(jié)束時會回調(diào)此方法 print("status is dismissed"); } else if (status == AnimationStatus.forward) { print("status is forward"); //執(zhí)行 controller.forward() 會回調(diào)此狀態(tài) } else if (status == AnimationStatus.reverse) { //執(zhí)行 controller.reverse() 會回調(diào)此狀態(tài) print("status is reverse"); } });
執(zhí)行動畫的 widget
//旋轉(zhuǎn) Widget buildRotationTransition() { return Center( child: RotationTransition( //設(shè)置動畫的旋轉(zhuǎn)中心 alignment: Alignment.center, //動畫控制器 turns: controller, //將要執(zhí)行動畫的子view child: Container( width: 100, height: 100, color: Colors.grey, ), ), ); } }
2 flutter RotationTransition實現(xiàn)無限循環(huán)旋轉(zhuǎn)動畫
實現(xiàn)方法 就是在動畫結(jié)束的時候再開啟動畫
//動畫開始、結(jié)束、向前移動或向后移動時會調(diào)用StatusListener controller.addStatusListener((status) { if (status == AnimationStatus.completed) { //動畫從 controller.forward() 正向執(zhí)行 結(jié)束時會回調(diào)此方法 print("status is completed"); //重置起點 controller.reset(); //開啟 controller.forward(); } else if (status == AnimationStatus.dismissed) { //動畫從 controller.reverse() 反向執(zhí)行 結(jié)束時會回調(diào)此方法 print("status is dismissed"); } else if (status == AnimationStatus.forward) { print("status is forward"); //執(zhí)行 controller.forward() 會回調(diào)此狀態(tài) } else if (status == AnimationStatus.reverse) { //執(zhí)行 controller.reverse() 會回調(diào)此狀態(tài) print("status is reverse"); } });
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android實現(xiàn)將一個Activity設(shè)置成窗口樣式的方法
這篇文章主要介紹了Android實現(xiàn)將一個Activity設(shè)置成窗口樣式的方法,涉及Android的窗口樣式設(shè)置與布局技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-02-02android內(nèi)存優(yōu)化之圖片優(yōu)化
對圖片本身進行操作。盡量不要使用setImageBitmap、setImageResource、BitmapFactory.decodeResource來設(shè)置一張大圖,因為這些方法在完成decode后,最終都是通過java層的createBitmap來完成的,需要消耗更多內(nèi)存2012-12-12Android中AOP的應(yīng)用實踐之過濾重復(fù)點擊
這篇文章主要給大家介紹了關(guān)于Android中AOP的應(yīng)用實踐之過濾重復(fù)點擊的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09