让小球在 Flutter 中跳跃起来：打造趣味十足的动画效果

大家好，我是 [您的姓名]，欢迎来到我的技术博客。今天，我们深入探讨如何使用 Flutter Animation 创建一个趣味十足的动画效果，让小球在屏幕上欢快跳跃。让我们开始吧！

了解 Flutter Animation

Flutter Animation 是一个功能强大的库，可用于创建复杂的动画效果。它提供了一组丰富的工具，可让您控制动画的各个方面，包括时间线、缓动函数和插值。借助 Flutter Animation，您可以轻松地为您的应用程序添加动感和趣味性。

创建跳跃小球动画

为了创建跳跃小球动画，我们将使用 AnimationController 和 Tween。AnimationController 负责管理动画的时间线，而 Tween 则定义动画属性值的变化范围。

首先，在您的 initState 方法中创建 AnimationController：

AnimationController _controller = AnimationController(
  vsync: this,
  duration: Duration(seconds: 1),
);

接下来，定义动画的开始和结束属性值：

Tween<double> _tween = Tween<double>(begin: 0, end: 100);

使用 AnimationController 和 Tween 创建动画：

Animation<double> _animation = _tween.animate(_controller);

最后，在您的 build 方法中使用 _animation 来更新小球的位置：

Positioned(
  top: _animation.value,
  child: Container(
    width: 10,
    height: 10,
    color: Colors.red,
  ),
);

启动和停止动画

要启动动画，只需调用 _controller.forward()。要停止动画，请调用 _controller.stop()。

添加弹跳效果

为了让小球看起来像是在弹跳，我们需要在动画达到其结束位置时反转它。我们可以通过在 _controller 上添加一个 addListener 侦听器来实现这一点：

_controller.addListener(() {
  if (_controller.isCompleted) {
    _controller.reverse();
  }
});