成為Flutter動畫大師(二)

CoorChice發表於2019-04-06

目錄傳送門:《Flutter快速上手指南》先導篇

插值器的作用主要是為動畫提供每一幀的數值,通過將該數值設定給相應的檢視(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.linear:和 Tween(begin:0.0, end: 1.0) 是一個效果。

  • Curve.bounceIn

  • Curve.bounceOut

  • Curve.decelerate

更多的型別和效果,可以檢視 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

目錄傳送門:《Flutter快速上手指南》先導篇

如何找到我?

傳送門:CoorChice 的主頁

傳送門:CoorChice 的 Github


相關文章