flutter FadeTransition實現(xiàn)透明度漸變動畫
本文實例為大家分享了flutter實現(xià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不在當前屏幕時)消耗不必要的資源
//duration 動畫的時長,這里設(shè)置的 seconds: 2 為2秒,當然也可以設(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)說明

flutter FadeTransition實現(xiàn)透明度漸變動畫

//動畫控制器
AnimationController controller;
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");
//反向執(zhí)行
//controller.reverse();
} else if (status == AnimationStatus.dismissed) {
//動畫從 controller.reverse() 反向執(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");
}
});
執(zhí)行動畫的view
//漸變動畫
Widget buildSlideTransition() {
return Center(
child: FadeTransition(
opacity: controller,
//將要執(zhí)行動畫的子view
child: Container(
width: 200,
height: 200,
color: Colors.grey,
child: Image.network(
"http://img5.duitang.com/uploads/item/201411/16/20141116124947_xBNxM.jpeg",
),
),
),
);
}
開始動畫
//動畫開始 controller.forward();
頁面消毀時
@override
void dispose() {
super.dispose();
controller.dispose();
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
android教程之使用popupwindow創(chuàng)建菜單示例
這篇文章主要介紹了android使用popupwindow創(chuàng)建菜單的示例,需要的朋友可以參考下2014-02-02
Android App使用RecyclerView實現(xiàn)上拉和下拉刷新的方法
RecyclerView一經(jīng)推出便被認為是替代ListView的存在,那么ListView的上拉和下拉刷新我們同樣可以使用RecyclerView來做到,這里我們就來看一下Android App使用RecyclerView實現(xiàn)上拉和下拉刷新的方法,首先先來點RecyclerView的小介紹:2016-06-06
分享10個很棒的學(xué)習(xí)Android開發(fā)的網(wǎng)站
我推薦的網(wǎng)站,都是我在學(xué)習(xí)Android 開發(fā)過程中發(fā)現(xiàn)的好網(wǎng)站,給初學(xué)者一些建議,少走一些彎路2015-03-03
RxJava入門指南及其在Android開發(fā)中的使用示例
RxJava是JVM的一個擴展庫,它能夠幫助Java更加方便地實現(xiàn)基于事件的編程,這對安卓來說十分有用,接下來就一起來看一下RxJava入門指南及其在Android開發(fā)中的使用示例:2016-06-06

