听一个动画完成答案

【问题标题】：Listen for an animation to complete听一个动画完成
【发布时间】：2017-07-26 03:21:42
【问题描述】：

我正在尝试在我的动画完成后执行一个动作。我尝试添加一个 statusListener 但这对我不起作用。我的代码如下所示：

  @override
  void initState() {
    super.initState();
    _controller = new AnimationController(
      duration: new Duration(milliseconds: 500),
      vsync: this,
    )..addStatusListener((AnimationStatus status) {
      print("Going");
      if (status.index == 3 && spins > 0) { // AnimationStatus index 3 == completed animation
        _controller.duration = new Duration(milliseconds: speed - 50);
        _controller.forward(from: _controller.value == null ? 0.0 : 1 - _controller.value);
        spins--;
        print(speed);
      }
    });
  }

print(Going); 永远不会被执行，但我的动画确实结束了。出了什么问题？

///---编辑---///

我使用的是AnimatedBuilder，那部分代码如下所示：

child: new AnimatedBuilder(
  animation: _controller,
  child: new Image.network(widget.url),
  builder: (BuildContext context, Widget child) {
    return new Transform.rotate(
      angle: _controller.value * 2.0 * math.PI,
      child: child,
    );
  },
),

【问题讨论】：

标签： animation dart flutter

【解决方案1】：

对您的评论和编辑做出反应，我查看了 AnimationBuilder。改编docs 中的示例，我想出了这个可行的解决方案：

class Spinner extends StatefulWidget {
  @override
  _SpinnerState createState() => new _SpinnerState();
}

class _SpinnerState extends State<Spinner> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  CurvedAnimation _animation;

  @override
  void initState() {
    super.initState();
    _controller = new AnimationController(
      duration: const Duration(seconds: 5),
      vsync: this,
    )..forward();

    _animation = new CurvedAnimation(
        parent: _controller,
        curve: Curves.linear,
    )..addStatusListener((AnimationStatus status) {
      if (status == AnimationStatus.completed)
        print('completed');
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return new AnimatedBuilder(
      animation: _animation,
      child: new Container(width: 200.0, height: 200.0, color: Colors.green),
      builder: (BuildContext context, Widget child) {
        return new Transform.rotate(
          angle: _controller.value * 2.0 * 3.1415,
          child: child,
        );
      },
    );
  }
}

如您所见，我将控制器用作动画的父级，而不是用作 AnimationBuilder 的动画。希望对您有所帮助。

【讨论】：

【解决方案2】：

你也可以使用 whenComplete 监听器

_animationController.forward().whenComplete((){
     //Trigger different responses, when animation is started at different places.
})

【讨论】：

【解决方案3】：

按照颤振画廊progress indicators 中的示例，您应该将 StatusListener 附加到动画，而不是控制器

_controller = AnimationController(
  duration: const Duration(milliseconds: 1500),
  vsync: this,
)..forward();

_animation = CurvedAnimation(
  parent: _controller,
  curve: const Interval(0.0, 0.9, curve: Curves.fastOutSlowIn),
  reverseCurve: Curves.fastOutSlowIn
)..addStatusListener((AnimationStatus status) {
  if (status == AnimationStatus.dismissed)
    _controller.forward();
  else if (status == AnimationStatus.completed)
    _controller.reverse();
});

我没有用你的代码对此进行测试。大喊一声，如果它不起作用;)

【讨论】：

我忘了告诉我我使用的是AnimatedBuilder（我编辑了我的帖子并添加了一些代码）。我认为我无法将您的方法应用于我所写的内容，还有其他想法吗？