Flutter 学习笔记 12 - 动画 CurvedAnima

继承 Animation<double>，生成 double 值。

final CurvedAnimation curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);

第二个参数是 Curve 对象，表示动画曲线函数，类似 Android 动画的插值器。有一些内置曲线

static const Curve linear = _Linear._();
static const Curve decelerate = _DecelerateCurve._(); // 相当于 Android 的 DecelerateInterpolator

这些内置对象就是继承了 Curve 类，重写 transform 方法，如

class _Linear extends Curve {
  const _Linear._();

  @override
  double transform(double t) => t;
}

因而可以自定义任何函数：

class ShakeCurve extends Curve {
  @override
  double transform(double t) {
    return math.sin(t * math.PI * 2);
  }
}

Curve 有一子类 Cubic，是贝塞尔曲线，又定义了它的若干实例，如

static const Cubic ease = Cubic(0.25, 0.1, 0.25, 1.0);
static const Cubic easeIn = Cubic(0.42, 0.0, 1.0, 1.0);
//...

修改上面的例子

class AnimScreen extends StatefulWidget {
  @override
  _AnimState createState() => _AnimState();
}

class _AnimState extends State<AnimScreen> with SingleTickerProviderStateMixin {
  CurvedAnimation curve;
  AnimationController controller;

  @override
  initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 5000), vsync: this);
    // 创建一个 CurvedAnimation，监听它的 value
    curve = CurvedAnimation(parent: controller, curve: Curves.easeIn)
      ..addListener(() {
        setState(() {

        });
      });
    controller.forward();
  }

  Widget build(BuildContext context) {
    return Center(
      child: Container(
        margin: EdgeInsets.symmetric(vertical: 10.0),
        // 使用 CurvedAnimation 对象的 value
        height: 300 * curve.value,
        width: 300 * curve.value,
        child: FlutterLogo(),
      ),
    );
  }

  dispose() {
    controller.dispose();
    super.dispose();
  }
}

能看出速度越来越慢。

2019_01_11_17_42_18.gif