成爲Flutter動畫大師(二)

目錄傳送門：《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