flutter FadeTransition實(shí)現(xiàn)透明度漸變動(dòng)畫
本文實(shí)例為大家分享了flutter實(shí)現(xiàn)透明度漸變動(dòng)畫的具體代碼,供大家參考,具體內(nèi)容如下
flutter 動(dòng)畫狀態(tài)監(jiān)聽器
AnimationController
//動(dòng)畫控制器 AnimationController controller; //AnimationController是一個(gè)特殊的Animation對象,在屏幕刷新的每一幀,就會(huì)生成一個(gè)新的值, // 默認(rèn)情況下,AnimationController在給定的時(shí)間段內(nèi)會(huì)線性的生成從0.0到1.0的數(shù)字 //用來控制動(dòng)畫的開始與結(jié)束以及設(shè)置動(dòng)畫的監(jiān)聽 //vsync參數(shù),存在vsync時(shí)會(huì)防止屏幕外動(dòng)畫(動(dòng)畫的UI不在當(dāng)前屏幕時(shí))消耗不必要的資源 //duration 動(dòng)畫的時(shí)長,這里設(shè)置的 seconds: 2 為2秒,當(dāng)然也可以設(shè)置毫秒 milliseconds:2000. controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); //動(dòng)畫開始、結(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)畫重置到開始前的狀態(tà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 的常用操作說明
flutter AnimationStatus 動(dòng)畫狀態(tài)說明
flutter FadeTransition實(shí)現(xiàn)透明度漸變動(dòng)畫
//動(dòng)畫控制器 AnimationController controller; controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); //動(dòng)畫開始、結(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"); //反向執(zhí)行 //controller.reverse(); } else if (status == AnimationStatus.dismissed) { //動(dòng)畫從 controller.reverse() 反向執(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"); } });
執(zhí)行動(dòng)畫的view
//漸變動(dòng)畫 Widget buildSlideTransition() { return Center( child: FadeTransition( opacity: controller, //將要執(zhí)行動(dòng)畫的子view child: Container( width: 200, height: 200, color: Colors.grey, child: Image.network( "http://img5.duitang.com/uploads/item/201411/16/20141116124947_xBNxM.jpeg", ), ), ), ); }
開始動(dòng)畫
//動(dòng)畫開始 controller.forward();
頁面消毀時(shí)
@override void dispose() { super.dispose(); controller.dispose(); }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- flutter實(shí)現(xiàn)帶刪除動(dòng)畫的listview功能
- Flutter實(shí)戰(zhàn)教程之酷炫的開關(guān)動(dòng)畫效果
- 利用Flutter實(shí)現(xiàn)“孔雀開屏”的動(dòng)畫效果
- 如何使用Flutter實(shí)現(xiàn)58同城中的加載動(dòng)畫詳解
- flutter RotationTransition實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫
- flutter PositionedTransition實(shí)現(xiàn)縮放動(dòng)畫
- Flutter路由的跳轉(zhuǎn)、動(dòng)畫和傳參詳解(最簡單)
- Flutter 用自定義轉(zhuǎn)場動(dòng)畫實(shí)現(xiàn)頁面切換
相關(guān)文章
Android ViewPager2 使用及自定義指示器視圖實(shí)現(xiàn)
這篇文章主要為大家介紹了Android ViewPager2 使用及自定義指示器視圖實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09Android實(shí)現(xiàn)給TableLayou繪制邊框的方法
這篇文章主要介紹了Android實(shí)現(xiàn)給TableLayou繪制邊框的方法,涉及Android TableLayou布局控制相關(guān)技巧,需要的朋友可以參考下2016-03-03Android提高之TelephonyManager功能探秘
這篇文章主要介紹了Android的TelephonyManager功能,可以幫助讀者更好的理解Java反射機(jī)制,需要的朋友可以參考下2014-08-08Android基于OpenCV實(shí)現(xiàn)QR二維碼檢測
QR碼比普通一維條碼具有快速讀取和更大的存儲(chǔ)資料容量,也無需要像一維條碼般在掃描時(shí)需要直線對準(zhǔn)掃描儀。因此其應(yīng)用范圍已經(jīng)擴(kuò)展到包括產(chǎn)品跟蹤,物品識(shí)別,文檔管理,庫存營銷等方面。本文講解Android基于OpenCV實(shí)現(xiàn)QR二維碼檢測的步驟2021-06-06Android?AMS啟動(dòng)App進(jìn)程原理分析
這篇文章主要介紹了Android?AMS啟動(dòng)App進(jìn)程原理,系統(tǒng)fork函數(shù)是如何創(chuàng)建進(jìn)程,文中有詳細(xì)的代碼示例,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-05-05Android自定義View實(shí)現(xiàn)loading動(dòng)畫加載效果
項(xiàng)目開發(fā)中對Loading的處理是比較常見的,安卓系統(tǒng)提供的不太美觀,引入第三發(fā)又太麻煩,這時(shí)候自己定義View來實(shí)現(xiàn)這個(gè)效果。這篇文章主要介紹了Android自定義View實(shí)現(xiàn)loading動(dòng)畫加載效果,需要的朋友可以參考下2017-03-03Kotlin中空判斷與問號(hào)和感嘆號(hào)標(biāo)識(shí)符使用方法
最近使用kotlin重構(gòu)項(xiàng)目,遇到了一個(gè)小問題,在Java中,可能會(huì)遇到判斷某個(gè)對象是否為空,為空執(zhí)行一段邏輯,不為空執(zhí)行另外一段邏輯,下面這篇文章主要給大家介紹了關(guān)于Kotlin中空判斷與問號(hào)和感嘆號(hào)標(biāo)識(shí)符處理操作的相關(guān)資料,需要的朋友可以參考下2022-12-12