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

Question

假设我在Stack小部件中有3个形状，需要从A点移动到B点。我想在指定的延迟0ms 1000ms 2000ms ..之后开始这3个动画。因此，我有3个分离的AnimationController对象，但没有看到类似delay:的构造函数参数。我试图使用循环循环运行forward方法3次

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

要么

await Future.delayed(Duration(milliseconds: delay));
currentController.forward(from: value);

或使用Timer类代替Future，但无法正常工作。在前台工作正常，但是当我将应用程序移动到背景并返回到前台时，每个形状之间的间隙消失，并且它们处于相同的位置，并像一个形状一样移动。

Answer 1

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

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: ...,
),