can I forward same animationController again after AnimationStatus.completed

user_17618647 0
Viewed 147

I want to make same animationController forward when the animation status is completed, and setState to update value which is inside animation tween, so the second animationController forward will achieve different animation, is that possible? thank you!

GestureDetector(
    
        onTap: () {
          if (firstController.status == AnimationStatus.dismissed) {
            firstController.forward();
          } else if (firstController.status == AnimationStatus.completed) {
            setState(() {

              double firstOpacity = 1.0;  //new value
              double secondOpacity = 0.7;//new value
              double thirdOpacity = 0.4;//new value
            });
            firstController.forward();  // now it does not work
          }
        },
        child: Center(
          child: Container(
            child: AnimatedBuilder(
              animation: firstController,
              builder: _buildAnimation,
            ),
          ),
        ),
      ),
flutter-animation flutter
2 Answers

I hope you will get an idea from these links and code.

  late Animation<double> _animation;
  late AnimationController _animationController;
  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        vsync: this,
        duration: const Duration(milliseconds: 1500),
        reverseDuration: const Duration(milliseconds: 1500))
      ..forward();
    _animationController.addListener(() {
      if (_animationController.isCompleted) {
        _animationController.reverse();
      } else if (_animationController.isDismissed) {
        _animationController.forward();
      }
      setState(() {});
    });
    _animation =
        CurvedAnimation(parent: _animationController, curve: Curves.easeInOut);
    _animation = Tween(begin: -.6, end: .4).animate(_animation);
  }
user_181582160

You can do that and more! This api article talks about staggered animations where you can set an interval percentage of the entire animation to your specific animation. The Interval part is where you set those values.

width = Tween<double>(
  begin: 50.0,
  end: 150.0,
).animate(
  CurvedAnimation(
    parent: controller,
    curve: Interval(
      0.125, 0.250,
      curve: Curves.ease,
    ),
  ),
);

About the AnimationController, you have some methods there to help, look this api article about them and search for repeat, reset and reverse methods and look the parameters that you have. You can do a lot with Flutter.

Edit:

If you want to make a 1/3 animation that pauses before continuing, you can do something like:

    final animationController = AnimationController(vsync: this);
    final animation = Tween<double>(begin: 0, end: 0).animate(
      CurvedAnimation(
        parent: animationController,
        curve: const Interval(
          0,
          1 / 3,
          curve: Curves.easeIn,
        ),
      ),
    );
    animation.addStatusListener((status) {
      animationController.stop(); // For example, but read the documentation about the stop method
    });
user_95768700
Related