Flutter 延迟动画代码错误：AnimationController.forward() 在 AnimationController.dispose() 之后调用

Question

我在欢迎屏幕中实现了延迟动画，但在我的颤振应用程序中出现以下错误。让我知道我的代码中是否有错误，我可以更正并修复此问题。

错误是：

E/flutter (11565): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)]
Unhandled Exception:
'package:flutter/src/animation/animation_controller.dart': Failed
assertion: line 455 pos 7: '_ticker != null':
AnimationController.forward() called after
AnimationController.dispose()

这是我的代码：

class DelayedAnimation extends StatefulWidget {
  final Widget child;
  final int delay;
 
  DelayedAnimation({@required this.child, this.delay});

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

class _DelayedAnimationState extends State<DelayedAnimation> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _animOffset;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 800),
    );
    final curve = CurvedAnimation(
      curve: Curves.decelerate,
      parent: _controller,
    );
    _animOffset = Tween<Offset>(
      begin: const Offset(0.0, 0.35),
      end: Offset.zero,
    ).animate(curve);

    if (widget.delay == null) {
      _controller.forward();
    } else {
      Timer(Duration(milliseconds: widget.delay), () {
        _controller.forward();
      });
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      child: SlideTransition(
        position: _animOffset,
        child: widget.child,
      ),
      opacity: _controller,
    );
  }
}

Answer 1

当您使用Timer 或Future.delayed 与AnimationController 交互时，通常会出现此问题。这就是问题。可以说delay = 1000。

以下代码告诉 Flutter，在 1000 毫秒内，在您的 DelayedAnimation 小部件中的动画控制器上调用 forward()

Timer(Duration(milliseconds: widget.delay), () {
   _controller.forward();
});

但是，在此之前，您的 DelayedAnimation 小部件已被释放（例如，如果用户移动到不同的屏幕，则会发生这种情况）

这意味着当Timer执行时，它在一个已经被释放的控制器上调用forward()（因为DelayedAnimation已经被释放了）

有几个解决方案。

1. 在前转前检查mounted 属性：

Timer(
  Duration(
    milliseconds: widget.delay
  ), 
  () {
    if(mounted) {
      _controller.forward();
    }
  }
);

或 2. 创建计时器时存储它：

_timer = Timer(
  Duration(
    milliseconds: widget.delay
  ), 
  () {
    _controller.forward();
  }
);

然后在 dispose 时取消它：

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

Answer 2

您尚未提供有关您使用的Timer 的信息，因此无法评论您的代码中可能出现的问题。

但我尝试使用Future.delayed 来延迟动画，对我来说效果很好。

Future.delayed(Duration(milliseconds: widget.delay), () {
        _controller.forward();
      });

希望对你有所帮助。

编辑：

'_ticker != null': AnimationController.forward() 调用后 AnimationController.dispose()

错误显示，forward() 在 dispose() 之后调用。这可能发生在您在延迟到期之前转到另一个屏幕并触发_controller.forward() 的情况下。转到另一个屏幕会导致_contoller.dispose()，因此在此之后调用_controller.forward() 会导致错误，因为_controller 已经被释放。例如，如果应用在 1 秒后进入下一个屏幕，而动画延迟为 2 秒，则可能会发生这种情况。