必要的概念和類
-
Animation對象发笔，是Flutter動畫庫中的核心類娜睛，插入用于引導動畫的值 -
Animation對象知道當前動畫的狀態(tài)（如：動畫是否開始，停止娜扇，前進或者后退）越妈，但對屏幕上顯示的內(nèi)容一無所知 -
AnimationController對象管理著Animation -
CurvedAnimation將動畫定義成非線性運動的動畫 -
Tween在被動畫對象使用的數(shù)據(jù)范圍之間進行插值季俩。例如，Tween可能會定義從紅色到藍色或從 0 到 255 的插值 - 使用
Listeners和StatusListeners來監(jiān)聽動畫狀態(tài)的變化
步驟
-
初始化一個
AnimationController對象AnimationController controller = AnimationController(duration: const Duration(milliseconds: 500), vsync: this); -
初始化一個
Animation對象梅掠， 并將AnimationController作為參數(shù)傳遞進去酌住。這里的Animation對象是通過Tween對象的animate方法創(chuàng)建的Animation<int> alpha = IntTween(begin: 0, end: 255).animate(controller); -
調(diào)用
AnimationController的forward()方法執(zhí)行動畫controller.forward(); -
在
Widget的dispose()方法中調(diào)用釋放資源controller.dispose();
案例
下面的案例是在給定的時間內(nèi)改變 widget 的寬高
- 我們需要實時獲取
Animation的value來賦給 widget 的寬高 - 要改變 widget 的寬高，那么就需要
setState(...)來讓 widget 重繪
首先我們需要一個可以改變狀態(tài)的 widget阎抒，也就是繼承自 StatefulWidget 酪我，然后按照我們上述的步驟來，代碼如下：
class AnimateApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _AnimateAppState();
}
}
class _AnimateAppState extends State<AnimateApp> with SingleTickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
@override
void initState() {
super.initState();
// 創(chuàng)建 AnimationController 對象
controller = AnimationController(
vsync: this, duration: const Duration(milliseconds: 2000));
// 通過 Tween 對象 創(chuàng)建 Animation 對象
animation = Tween(begin: 50.0, end: 200.0).animate(controller)
..addListener(() {
// 注意：這句不能少且叁，否則 widget 不會重繪都哭，也就看不到動畫效果
setState(() {});
})
// 執(zhí)行動畫
controller.forward();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'AnimateApp',
theme: ThemeData(
primaryColor: Colors.redAccent
),
home: Scaffold(
appBar: AppBar(
title: Text('AnimateApp'),
),
body: Center(
child: Container(
// 獲取動畫的值賦給 widget 的寬高
width: animation.value,
height: animation.value,
decoration: BoxDecoration(
color: Colors.redAccent
),
),
)
)
);
}
@override
void dispose() {
// 資源釋放
controller.dispose();
super.dispose();
}
}
效果如下：
可以看出上面的動畫是線性運動的，我們可以通過 CurvedAnimation 來實現(xiàn)非線性運動的動畫代碼如下：
controller = AnimationController(
vsync: this, duration: const Duration(milliseconds: 2000));
// 非線性動畫
final CurvedAnimation curve = CurvedAnimation(
parent: controller, curve: Curves.elasticOut);
animation = Tween(begin: 50.0, end: 200.0).animate(curve)
..addListener(() {
setState(() {});
});
效果如下：
然后我們還可以給動畫添加狀態(tài)監(jiān)聽逞带，通過給 Animation 添加 addStatusListener(...) 來監(jiān)聽當前動畫的狀態(tài)欺矫，如：動畫是否播放完成。我們可以給上面的例子加一個狀態(tài)監(jiān)聽展氓，讓動畫無限執(zhí)行：
animation = Tween(begin: 50.0, end: 200.0).animate(curve)
..addListener(() {
setState(() {});
})
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
AnimationStatus.completed 表示動畫在結束時停止的狀態(tài)穆趴，這個時候我們讓動畫反向執(zhí)行（從后往前）；AnimationStatus.dismissed 表示動畫在開始時就停止的狀態(tài)遇汞，這個時候我們讓動畫正常執(zhí)行（從前往后）未妹。這樣就可以讓動畫無限執(zhí)行了。
Tween 還可以接受 Color 類型的參數(shù)勺疼，實現(xiàn)顏色漸變的效果教寂，下面讓 widget 的顏色從 紅色 漸變到 藍色，部分代碼如下：
controller = AnimationController(
duration: const Duration(milliseconds: 3000), vsync: this);
animation = ColorTween(begin: Colors.redAccent, end: Colors.blue).animate(
controller)
..addListener(() {
setState(() {});
});
controller.forward();
...
child: Container(
decoration: BoxDecoration(
color: animation.value
),
margin: EdgeInsets.symmetric(vertical: 10.0),
height: 200.0,
width: 200.0,
),
效果如下：
小提示
with
我們可以看到 _AnimateAppState 類后面跟了一個 with SingleTickerProviderStateMixin执庐，這個 with 什么意思呢 酪耕？ with 是 Dart 中的一個關鍵字，可以把它理解為 混入（mixin） 轨淌∮厮福可以看 stackoverflow 上的這個回答。
混入（mixin） 指的是可以將一個或多個類的功能添加到自己的類中递鹉，而無需繼承這些類盟步。混入后可以調(diào)用這些類中的方法躏结。Dart 中沒有多繼承却盘，可以使用 混入（mixin）來避免多重繼承會導致的問題。
上述代碼中 _AnimateAppState 類 繼承了 State 類，但是初始化 AnimationController 的時候需要一個 TickerProvider 類型的 vsync 參數(shù)黄橘，所以我們 混入了 TickerProvider 的子類 SingleTickerProviderStateMixin
看一個簡單的混入的小例子
void main() {
var a = new A();
a.methodB();
a.methodC();
a.methodD();
new E(a);
}
class A extends B with C, D {
}
class B {
void methodB() {
print('Class B methodB is call');
}
}
class C {
void methodC() {
print('Class C methodC is call');
}
}
class D {
void methodD() {
print('Class D methodD is call');
}
}
class E {
final C c;
E(this.c) {
c.methodC();
}
}
可以看出類 A 繼承了類 B兆览，然后 混入 了類 C 和類 D，然后在 main 方法中可以使用類 A 的實例去調(diào)用 類 B, C, D 中的方法塞关。然后還有類 E抬探，構造方法中需要一個類 C 作為參數(shù)，然后因為類 A 混入了類 C帆赢，所以可以把類 A 的實例當作參數(shù)傳入到類 E 的構造方法中小压。
運行輸出如下：
Class B methodB is call
Class C methodC is call
Class D methodD is call
Class C methodC is call
..addListener
在上面的例子中，我們看到了這樣的寫法
animation = Tween(begin: 50.0, end: 200.0).animate(curve)
..addListener(() {
setState(() {});
});
注意到 addListener 前面的兩個點號 ..了吧椰于，什么意思呢怠益？直接看個小例子吧！
void main() {
List<String> list = getList()
..add("android")
..add("flutter")
..add("kotlin")
..removeAt(0);
list.forEach((item) {
print(item);
});
// ----------等同于
print('---------------------------');
List<String> list2 = getList();
list2.add("android");
list2.add("flutter");
list2.add("kotlin");
list2.removeAt(0);
list2.forEach((item) {
print(item);
});
}
List<String> getList() {
return new List();
}
輸入如下：
flutter
kotlin
---------------------------
flutter
kotlin
如有錯誤廉羔，還請指出溉痢，謝謝！
