Flutter Animation动画开发之——Curve动画曲线

简介

在Flutter Animation动画开发之——最简单的动画入门这篇文章中我们介绍了最简单的动画开发流程

今天我们在该动画的基础上添加动画曲线，默认情况下动画是线性的，可以理解为变化是匀速的，设置动画曲线可以设置动画的变化速率，可以是加速的，也可以是减速的，或者是先加速后减速的，等等

动画曲线用的是CurvedAnimation类，用法如下，

• parent参数传入一个Animation对象，比如AnimationController
• curve传入传入的就是动画曲线的具体实现，Curves类中已经帮我们默认实现了很多常用的动画曲线，比如减速运动Curves.decelerate

CurvedAnimation animation=CurvedAnimation(parent: controller, curve: Curves.linear);

 下面表格列出一些常见的曲线，其他还有许多预定义的曲线，可以自行去了解

Curves曲线	动画过程
linear	匀速的
decelerate	匀减速
ease	开始加速，后面减速
easeIn	开始慢，后面快
easeOut	开始快，后面慢
easeInOut	开始慢，然后加速，最后再减速

示例

下面贴出一个完整的domo，演示一个绿色方块宽高从100变化成500的动画过程，变化的曲线为easeInOut，也就是先加速后减速的过程

class AnimationRoute extends StatefulWidget {
  @override
  AnimationRouteState createState() => AnimationRouteState();
}

class AnimationRouteState extends State<AnimationRoute> with SingleTickerProviderStateMixin {

  Animation<double> animation;
  AnimationController controller;

  initState() {
    super.initState();
    // Controller设置动画时长
    // vsync设置一个TickerProvider，当前State 混合了SingleTickerProviderStateMixin就是一个TickerProvider
    controller = AnimationController(
        duration: Duration(seconds: 5),
        vsync: this //
    );
    // 设置动画曲线，开始快慢，先加速后减速
    animation=CurvedAnimation(parent: controller, curve: Curves.easeInOut);
    // Tween设置动画的区间值，animate()方法传入一个Animation，AnimationController继承Animation
    animation = new Tween(begin: 100.0, end: 500.0).animate(animation)
      // addListener监听动画每一帧的回调，这个调用setState()刷新UI
      ..addListener(() {
        setState(()=>{});
      });
    //启动动画(正向执行)
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      // 这里显示一个方形区域，随着动画执行不断变大
      child: Container(
        color: Colors.green,
        width: animation.value,
        height: animation.value,
      ),
    );
  }

  @override
  void dispose() {
    // 释放资源
    controller.dispose();
    super.dispose();
  }
}

自定义Curve

除了用预定义的Curve外，我们还可以自定义自己的Curve曲线，原理很简单，只需实现Curve，然后实现里面的gransformInternal方法，自己做一些变换

例如以下是最简单的Curve实现，未做任何变换，将t直接返回，这就是线性动画

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

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