Android 如何在指定的持续时间后以正确的方式运行动画？

假设我在

堆栈

小部件中有3个形状，需要从点A移动到点B。我想在指定的延迟0毫秒1000毫秒2000毫秒后启动这3个动画。因此，我有3个分开的

AnimationController

对象，但我没有看到像

delay:

这样的构造函数参数。我尝试在循环中使用

int delay = 0;
for (final AnimationController currentController in controllers) {
   Future.delayed(Duration(milliseconds: delay), () {
       currentController.forward(from: value);
    });
   delay += 1000;
}

或

---

或者使用

Timer

类而不是

Future

但它不能正常工作。在前台，它工作正常，但当我将应用程序移动到后台，然后返回到前台时，每个形状之间的间隙消失，并且它们在相同的位置粘在一起，像一个形状一样移动。

您可以制作一个有状态的小部件，如下所示。根据需要更改动画

class SlideUpWithFadeIn extends StatefulWidget {
  final Widget child;
  final int delay;
  final Curve curve;

  SlideUpWithFadeIn({@required this.child, @required this.curve, this.delay});

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

class _SlideUpWithFadeInState extends State<SlideUpWithFadeIn>
    with TickerProviderStateMixin {
  AnimationController _animController;
  Animation<Offset> _animOffset;

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

    _animController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 1250));
    final curve =
        CurvedAnimation(curve: widget.curve, parent: _animController);
    _animOffset =
        Tween<Offset>(begin: const Offset(0.0, 0.75), end: Offset.zero)
            .animate(curve);

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

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

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

class SlideUpWithFadeIn extends StatefulWidget {
  final Widget child;
  final int delay;
  final Curve curve;

  SlideUpWithFadeIn({@required this.child, @required this.curve, this.delay});

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

class _SlideUpWithFadeInState extends State<SlideUpWithFadeIn>
    with TickerProviderStateMixin {
  AnimationController _animController;
  Animation<Offset> _animOffset;

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

    _animController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 1250));
    final curve =
        CurvedAnimation(curve: widget.curve, parent: _animController);
    _animOffset =
        Tween<Offset>(begin: const Offset(0.0, 0.75), end: Offset.zero)
            .animate(curve);

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

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

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

SlideUpWithFadeIn(
   child: ...,
   delay: 0,
   curve: ...,
),
SlideUpWithFadeIn(
   child: ...,
   delay: 1000,
   curve: ...,
),
SlideUpWithFadeIn(
   child: ...,
   delay: 2000,
   curve: ...,
),