Question

我有一个简单的动画：

  Animation<double> animation;
  Tween<double> tween = Tween(begin: 1, end: 1.15);
  AnimationController animationController;
  @override
  void initState() {
    super.initState();
    animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    animation = animationController.drive(tween);
}

我想要什么？

使此动画重复20次。

我在尝试发布此问题之前尝试过什么？

1-此方法没有可让我重复此动画的参数或方式，例如20次。

它会不断重复，并且永远重复：

    animationController.repeat();

2-使用简单循环。它挂起我的应用程序，需要停止整个应用程序并重新运行，以解决该问题挂起。看来循环完全不涉及期货：

                            do {
                              animationController.forward().then((x) {
                                animationController.reverse().then((x) {
                                  repeats++;
                                });
                              });
                            } while (repeats < 20);

3-制作int变量并添加一个侦听器..etc，正在工作，，但看来，这不是解决此问题的最佳方法：< / strong>

int repeats = 0; animation.addStatusListener((status) { if (repeats < 20) { if (status == AnimationStatus.completed) { animationController.reverse(); } else if (status == AnimationStatus.dismissed) { animationController.forward(); } repeats++; } });

4-接then的链。 **对此无评论**???：

animationController.forward().then((x) { animationController.reverse().then((x) { animationController.forward().then((x) { animationController.reverse().then((x) { animationController.forward().then((x) { animationController.reverse(); }); }); }); }); });

现在，很快我该如何重复动画20次

Answer 1

您可以尝试：

5-从重复使用TickerFuture返回，设置超时，然后停止动画。

 AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 3),
    );

    _animationController.addListener(() => setState(() {}));
    TickerFuture tickerFuture = _animationController.repeat();
    tickerFuture.timeout(Duration(seconds:  3 * 10), onTimeout:  () {
      _animationController.forward(from: 0);
      _animationController.stop(canceled: true);
    });
  }

Answer 2

如果您有一个带有playing参数的窗口小部件，可以将其动态设置为true或false（以动态地启动和停止动画），则可以使用可取消的Timer()而不是{{ 1}}：

Future.timeout

Answer 3

无需带扩展方法的计时器即可轻松完成此操作：

extension on AnimationController {
  void repeatEx({@required int times}) {
    var count = 0;
    addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        if (++count < times) {
          reverse();
        }
      } else if (status == AnimationStatus.dismissed) {
        forward();
      }
    });
  }
}

你可以这样使用它：

    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    )
      ..repeatEx(times: 10)
      ..forward();

Answer 4

AnimationController(
     lowerBound: 0.0, 
      upperBound: 20.0,
     vsync: this, duration: Duration(milliseconds: 300))

Answer 5

使用起来很简单，就像下面一样

var counter = 0;
int repeatTimes = 10 // how many times you want to repeat animation

animationController.addStatusListener((status) {
  if (status == AnimationStatus.completed) {
    if (++counter < repeatTimes) {
      animation.reverse();
    }
  } else if (status == AnimationStatus.dismissed) {
    animation.forward();
  }
});

重复动画特定的时间，例如Flutter重复20次

5 个答案: