如何停止动画一段时间然后重新开始

Question

我希望容器应该保持在中间几次，然后当几乎所有容器到达中间时将动画设置为正偏移。我也尝试过使用 tween 但这也不起作用。我尝试过使用动画控制器值检查并停止动画并重新开始，这也不起作用。我希望动画容器来自负偏移，在 middlet 上保留几次，然后动画到正偏移

更新了

   class _LoadingAnimationState extends State<LoadingAnimation>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late List<Animation<Offset>> _sequenceAnimation;

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

    _sequenceAnimation = List.generate(5, (index) {
      print("begin index $index ${index/5}}");
        print("end index $index ${(index+1)/5}");
      return TweenSequence<Offset>(<TweenSequenceItem<Offset>>[
        TweenSequenceItem(
            tween: Tween(
              begin: const Offset(-300, 0),
              end: const Offset(0, 0),
            ),
            weight: 20),
        TweenSequenceItem(
            tween: Tween(
              begin: const Offset(0, 0),
              end: const Offset(300, 0),
            ),
            weight: 20),
      ]).animate(CurvedAnimation(
        reverseCurve: Curves.decelerate,
        parent: _controller,
        curve: Interval(
          index / 5,
          (index + 1) / 5,
          curve: Curves.slowMiddle,
        ),
      ));
    });

    _controller.addListener(() {
      if (_controller.value > 0.5 && _controller.value < 0.7) {
        _controller.stop();
        print("stop");
        Future.delayed(const Duration(seconds: 2));
        _controller.forward();
        print("forwarrd");
        // Add a delay before starting the animation loop again
        // Future.delayed(const Duration(seconds: 2), () {

        // });
      }
    });
    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _controller.reset();
        _controller.forward();
      }
    });
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
      body: Center(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Wrap(
              children: List.generate(5, (index) {
                return AnimatedBuilder(
                  animation: _controller,
                  builder: (context, child) {
                    return Transform.translate(
                      offset: _sequenceAnimation[index].value,
                      child: Container(
                        margin: const EdgeInsets.all(5),
                        width: 10,
                        height: 10,
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.blue, // Replace with your color
                        ),
                      ),
                    );
                  },
                );
              }),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

您可以使用以下代码来获得所需的输出

class _LoadingAnimationState extends State<LoadingAnimation> with TickerProviderStateMixin {
  late AnimationController _controller;
  late List<Animation<Offset>> _sequenceAnimation;

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

    _sequenceAnimation = List.generate(5, (index) {
      return Tween<Offset>(
        begin: const Offset(-300, 0),
        end: const Offset(300, 0),
      ).animate(CurvedAnimation(
        parent: _controller,
        curve: Interval((index / 5) + 0.1, (index + 1) / 5),
      ));
    });

    _controller.addListener(() {
      if (_controller.value > 0.9) {
        // Add a delay before starting the animation loop again
        Future.delayed(const Duration(seconds: 2), () {
          _controller.reset();
          _controller.forward();
        });
      }
    });

    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
      body: Center(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Wrap(
              children: List.generate(5, (index) {
                return AnimatedBuilder(
                  animation: _controller,
                  builder: (context, child) {
                    return Transform.translate(
                      offset: _sequenceAnimation[index].value,
                      child: Container(
                        margin: const EdgeInsets.all(5),
                        width: 10,
                        height: 10,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.blue, // Replace with your color
                        ),
                      ),
                    );
                  },
                );
              }),
            )
          ],
        ),
      ),
    );
  }
}