flutter中的动画（tween动画）

flutter中的动画分为两类：基于tween的动画和以及物理的动画。
以下引用自flutterchina：
补间(Tween)动画
“介于两者之间”的简称。在补间动画中，定义了开始点和结束点、时间线以及定义转换时间和速度的曲线。然后由框架计算如何从开始点过渡到结束点。
基于物理的动画
在基于物理的动画中，运动被模拟为与真实世界的行为相似。例如，当你掷球时，它在何处落地，取决于抛球速度有多快、球有多重、距离地面有多远。 类似地，将连接在弹簧上的球落下（并弹起）与连接到绳子上的球放下的方式也是不同。
主要的类的介绍：
Animation 对象，是 Flutter 动画库中的核心类，插入用于引导动画的值。
Animation 对象知道当前动画的状态（如：动画是否开始，停止，前进或者后退），但对屏幕上显示的内容一无所知。
AnimationController 对象管理着 Animation。
CurvedAnimation 将动画定义成非线性运动的动画。
Tween 在被动画对象使用的数据范围之间进行插值。例如，Tween 可能会定义从红色到蓝色或从 0 到 255 的插值。
使用 Listeners 和 StatusListeners 来监听动画状态的变化。
（《主要类的介绍》引用自https://juejin.im/post/5b6270edf265da0f473539a6）
以下代码展示了tween动画的实现：

class TestAnimation extends StatefulWidget {
  @override
  _TestAnimationState createState() {
    return _TestAnimationState();
  }
}

class _TestAnimationState extends State<TestAnimation>
    with SingleTickerProviderStateMixin {
  //实例animation对象  和必要的控制和状态对象
  Animation<double> animation;
  AnimationController controller;
  AnimationStatus animationStatus;
  double animationvalue;

  @override
  void initState() {
    super.initState();
    //初始化一个动画控制器 定义好动画的执行时长
    controller =
        AnimationController(duration: const Duration(seconds: 2), vsync: this);
    //初始化一个补间动画 实例化一个补间类动画的实例，明确需要变换的区间大小和作用的controller对象
    animation = Tween<double>(begin: 0, end: 300).animate(controller);
    //提供方法 为动画添加监听
    animation.addListener(() {
      //当widget有变化的时候系统调用setstate方法重新绘制widget
      setState(() {
        //将动画的值传递给animationvalue（方便展示变化）
        animationvalue = animation.value;
      });
    });
    //提供方法 为动画添加状态监听
    animation.addStatusListener((AnimationStatus state) {
      //当animation的状态发生变化的时候系统调用setstate方法 将新的状态赋值并重新绘制widget
      setState(() {
        animationStatus = state;
      });
    });
  }

  //重写生命周期的dispose函数  将controller资源回收
  @override
  void dispose() {
    //回收资源
    controller.dispose();
    super.dispose();
  }

  //build方法  返回页面的布局widget
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        //column中包含3部分内容，1 带有点击效果的文字  2 列提示文字  3 一个图片
        children: <Widget>[
          //手势探测者（widget），可以将指定的child作为点击触发点，在ontap参数中可以设置具体的点击事件
          GestureDetector(
            onTap: () {
              controller.reset();
              controller.forward();
            },
            child: Text("开始"),
          ),
          Text("动画状态：" + animationStatus.toString()),
          Text("动画值：" + animationvalue.toString()),
          Container(
            height: animation.value,
            width: animation.value,
            child: FlutterLogo(),
          )
        ],
      ),
    );
  }
}

实现效果截图：