Flutter 什么是补间动画

在 Flutter 中，补间动画是一种实现平滑动画效果的动画类型。补间动画可以让开发者创建一种从一个值到另一个值的动画过渡。Flutter 中的补间动画有很多种类型，例如 Tween、CurvedAnimation 和 AnimatedWidget 等。

Tween

Tween 类是一个实现补间动画的基础类，它用于在两个值之间进行插值。例如，如果你想要让一个 Container 从绿色变成橙色，你可以使用 ColorTween：

Container(
  decoration: BoxDecoration(
    color: _colorTween.value,
  ),
)

然后，你可以使用 ColorTween 来构建一个补间动画：

final _colorTween = ColorTween(begin: Colors.green, end: Colors.orange);

这将创建一个从绿色到橙色的补间动画。

CurvedAnimation

CurvedAnimation 类可用于调整动画的速度与变化方式。例如，如果你想以加速度停止的方式移动一个 Container，可以使用以下代码：

final _animationController = AnimationController(
  duration: Duration(seconds: 2),
  vsync: this,
);

final _animation = CurvedAnimation(
  parent: _animationController,
  curve: Curves.easeOut,
);

这将创建一个时间长度为 2 秒的动画，其中 Curves.easeOut 会使动画在结束时以加速度停止。

AnimatedWidget

AnimatedWidget 类可简化使用补间动画的过程，它将一个 Tween 对象包装在自己的类中，然后当 Tween 发生变化时自动重新渲染子控件。例如，如果你想要调整 Container 的大小，你可以使用以下代码：

class MyAnimatedWidget extends AnimatedWidget {
  MyAnimatedWidget({Key? key, required Animation<double> animation})
      : super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;
    
    return Container(
      width: 50.0 + (200.0 - 50.0) * animation.value,
      height: 50.0 + (200.0 - 50.0) * animation.value,      
    );
  }
}

final _animationController = AnimationController(
  duration: const Duration(milliseconds: 500),
  vsync: this,
);

final _animation = Tween<double>(begin: 0, end: 1).animate(_animationController);

MyAnimatedWidget(animation: _animation),

这将创建一个在 500 毫秒内，将 Container 的宽度和高度从 50 到 200 的补间动画。

以上是关于 Flutter 中补间动画的介绍，希望对您有所帮助。