插值器的作用主要是為動畫提供每一幀的數值,通過將該數值設定給相應的檢視(Widget)元素,從而實現動畫效果。
常用的兩類插值器:
Tween:線性插值器,能夠自由設定起始值和結束值。
Curve:非線性插值器,預設情況下,起始值為 0.0,結束值為 1.0。
1.Tween
一個 Tween 插值器通過呼叫 animate()
傳入一個 AnimationController,會返回一個 Animation 物件,我們從這個物件中可以取到其產生的值。
AnimationController animationController = new AnimationController(
vsync: this, duration: Duration(milliseconds: 800));
Animation<double> animation =
Tween<double>(begin: 0, end: 400.0).animate(animationController);
複製程式碼
Tween 支援設定範型,比如上面的:Tween<double>
。
當然,所設的範型的型別需要有相應的 +
,-
運算子的定義,否則就會報錯。
2.Curve
// 建立 AnimationController
var controller = AnimationController(
vsync: this, duration: Duration(milliseconds: duration));
// 建立 CurveAnimation
var anim = CurvedAnimation(parent: controller, curve: curve)
複製程式碼
非線性插值器的用法和 Tween 不太一樣,它是直接建立一個 CurvedAnimation 物件,然後傳入一個 Curve。
Flutter 目前內建了多種線性插值器,它們的值變化都是 0.0 -> 1.0
, 比如:
更多的型別和效果,可以檢視 Curve 類的說明。
2.1 自定義 Curve
如果 Flutter 提供的 Curve 型別插值器不夠用,你可以自定義一個。
class _BounceInCurve extends Curve {
const _BounceInCurve._();
@override
double transform(double t) {
assert(t >= 0.0 && t <= 1.0);
return 1.0 - _bounce(1.0 - t);
}
}
複製程式碼
很簡單,關鍵就是重寫 transform()
函式,在其中計算返回中間值。
⚠️ 注意,
transform()
中接收到的 t 的取值範圍是 0 ~ 1。