成为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