Flutter：如何在 x 个周期后终止动画循环？答案

【问题标题】：Flutter: How to terminate animation loop after x cycles?Flutter：如何在 x 个周期后终止动画循环？
【发布时间】：2022-01-19 21:08:10
【问题描述】：

刚开始学习 Flutter。尝试创建一个动画圆圈，该圆圈扩展和收缩 x 次然后终止。我该如何做到这一点？

目前，我的圆形动画正在无限循环中扩大然后收缩。任何指导表示赞赏。

    class BreathingCircle extends StatefulWidget {
  const BreathingCircle({Key? key}) : super(key: key);

  @override
  _BreathingCircleState createState() => _BreathingCircleState();
}

class _BreathingCircleState extends State<BreathingCircle>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;
  late final Animation<double?> _shapeSizeChanger;

  // **** Currently this animation runs in endless loop. How can I get it to stop after
  // x expansion-retraction cycles?
  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(duration: const Duration(seconds: 2), vsync: this)
          ..repeat(reverse: true);
    _shapeSizeChanger = Tween<double>(begin: 0, end: 300).animate(_controller)
      ..addListener(() {
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: const AnimationBreather(), //Stack of shapes
      width: _shapeSizeChanger.value,
      height: _shapeSizeChanger.value,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

【问题讨论】：

标签： flutter dart flutter-animation

【解决方案1】：

您正在使用重复的 AnimationController 和 2 秒的 duration。您以循环开始动画：_controller.repeat(reverse: true)。要阻止它，您可以致电_controller.stop() 或_controller.reset()。唯一的问题是，什么时候做。

有几种不同的方法。最明显的一种是使用Timer（或Future.delayed）来安排几秒钟后的回调。例如，您的动画运行 2 秒并反转 2 秒，总共 4 秒。重复 10 次后停止，相当于说“40 秒后停止”，所以你可以这样写：

Future.delayed(Duration(seconds: 40), () {
  _controller.stop();
});

或者，您可以使用addStatusListener 来监控您的动画进度。也许你可以让你的动画只运行一次，而不是循环运行你的动画。然后，一旦您监控到它已完成运行并停止，您就可以重新启动它，这样您就可以跟踪它已经启动了多少次。

【讨论】：

非常感谢您的详尽解释。超级有帮助。这成功了。