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

Question

刚开始学习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();
  }
}

Answer 1

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

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

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

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

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

Flutter: How to terminate animation loop after x cycles?

dart

flutter

flutter-animation