如何在Flutter中实现悠悠球动画？求内置往复循环动画方案

当然有啦！Flutter的AnimationController其实已经内置了你需要的功能，完全不用自己手动写逻辑来控制正反向切换。

你只需要在调用repeat()方法时，传入reverse: true这个参数就可以了——它会让动画先正向执行完整个周期，接着自动反向播放回初始状态，然后重复这个正反向交替的过程，而不是每次都从头开始。

代码示例 #

// 首先初始化你的AnimationController
final AnimationController _animationController = AnimationController(
  duration: const Duration(seconds: 2), // 动画时长
  vsync: this, // 传入TickerProvider，通常State类混入SingleTickerProviderStateMixin
);

// 启动正反向循环动画
@override
void initState() {
  super.initState();
  _animationController.repeat(reverse: true);
}

// 别忘了在dispose时释放资源
@override
void dispose() {
  _animationController.dispose();
  super.dispose();
}

额外小技巧 #

• 如果不需要无限循环，可以通过count参数指定循环次数，比如_animationController.repeat(reverse: true, count: 3)，这样动画会完成3次正反向循环后自动停止。
• 要是你需要在动画正向结束、反向结束时触发一些逻辑，可以给控制器添加状态监听：

  _animationController.addStatusListener((status) {
    if (status == AnimationStatus.completed) {
      // 正向播放结束时的操作
      print("动画正向执行完毕");
    } else if (status == AnimationStatus.dismissed) {
      // 反向播放回到初始状态时的操作
      print("动画反向执行完毕，回到起点");
    }
  });
  

内容的提问来源于stack exchange，提问作者Tree