flutter FadeTransition實現透明度漸變動畫
更新時間:2019年07月17日 09:34:00 作者:早起的年輕人
這篇文章主要為大家詳細介紹了flutter FadeTransition實現透明度漸變動畫,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了flutter實現透明度漸變動畫的具體代碼,供大家參考,具體內容如下
flutter 動畫狀態(tài)監(jiān)聽器
AnimationController
//動畫控制器
AnimationController controller;
//AnimationController是一個特殊的Animation對象,在屏幕刷新的每一幀,就會生成一個新的值,
// 默認情況下,AnimationController在給定的時間段內會線性的生成從0.0到1.0的數字
//用來控制動畫的開始與結束以及設置動畫的監(jiān)聽
//vsync參數,存在vsync時會防止屏幕外動畫(動畫的UI不在當前屏幕時)消耗不必要的資源
//duration 動畫的時長,這里設置的 seconds: 2 為2秒,當然也可以設置毫秒 milliseconds:2000.
controller =
AnimationController(duration: const Duration(seconds: 2), vsync: this);
//動畫開始、結束、向前移動或向后移動時會調用StatusListener
controller.addStatusListener((status) {
if (status == AnimationStatus.completed) {
//動畫從 controller.reverse() 反向執(zhí)行 結束時會回調此方法
print("status is completed");
// controller.reset(); 將動畫重置到開始前的狀態(tài)
//開始執(zhí)行
//controller.forward();
} else if (status == AnimationStatus.dismissed) {
//動畫從 controller.forward() 正向執(zhí)行 結束時會回調此方法
print("status is dismissed");
//controller.forward();
}else if (status == AnimationStatus.forward) {
print("status is forward");
//執(zhí)行 controller.forward() 會回調此狀態(tài)
}else if (status == AnimationStatus.reverse) {
//執(zhí)行 controller.reverse() 會回調此狀態(tài)
print("status is reverse");
}
});
AnimationController 的常用操作說明

flutter AnimationStatus 動畫狀態(tài)說明

flutter FadeTransition實現透明度漸變動畫

//動畫控制器
AnimationController controller;
controller =
AnimationController(duration: const Duration(seconds: 2), vsync: this);
//動畫開始、結束、向前移動或向后移動時會調用StatusListener
controller.addStatusListener((status) {
if (status == AnimationStatus.completed) {
//動畫從 controller.forward() 正向執(zhí)行 結束時會回調此方法
print("status is completed");
//反向執(zhí)行
//controller.reverse();
} else if (status == AnimationStatus.dismissed) {
//動畫從 controller.reverse() 反向執(zhí)行 結束時會回調此方法
print("status is dismissed");
//controller.forward();
} else if (status == AnimationStatus.forward) {
print("status is forward");
//執(zhí)行 controller.forward() 會回調此狀態(tài)
} else if (status == AnimationStatus.reverse) {
//執(zhí)行 controller.reverse() 會回調此狀態(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();
}
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
android教程之使用popupwindow創(chuàng)建菜單示例
這篇文章主要介紹了android使用popupwindow創(chuàng)建菜單的示例,需要的朋友可以參考下2014-02-02
Android App使用RecyclerView實現上拉和下拉刷新的方法
RecyclerView一經推出便被認為是替代ListView的存在,那么ListView的上拉和下拉刷新我們同樣可以使用RecyclerView來做到,這里我們就來看一下Android App使用RecyclerView實現上拉和下拉刷新的方法,首先先來點RecyclerView的小介紹:2016-06-06
RxJava入門指南及其在Android開發(fā)中的使用示例
RxJava是JVM的一個擴展庫,它能夠幫助Java更加方便地實現基于事件的編程,這對安卓來說十分有用,接下來就一起來看一下RxJava入門指南及其在Android開發(fā)中的使用示例:2016-06-06

