Chaining seperate animations that work on the same properties

Question

I have looked at Staggered animations for chaining animations but there they use one animation for one widget's properties, e.g. a opacity animation is controlling the fade in, but what if I want to first fade in and then later fade out that same widget? I mean I already have created the fade in animation and that is used for the widget opacity value like this:

_opacityDontWorry = Tween( begin: 0.0, end: 1.0, ).animate( CurvedAnimation(parent: _animationController, curve: Interval(0.0, 0.75, curve: Curves.easeIn)), );

so those two are now bound together like this:

Opacity( opacity: _opacityDontWorry.value, child: Text("Don't worry"), )

This work just fine and my Opacity get faded in, but after it is faded in I would like it to fade out after a short pause, but how can I do this? Do I create a new Tween and overwrite the _opacityDontWorry with that, or? Am I even on the right path here, how do I chain multiple animations that alter the same properties on a widget?

Thank you
Søren

@Neigaard hi Neigaard, by any chance, you know how to solve this? stackoverflow.com/questions/68328866/… — VegetaSaiyan
– VegetaSaiyan, Commented Jul 11, 2021 at 3:45

Denis Bakhtin · Accepted Answer · 2020-10-11 12:17:37Z

May be this is a late answer. But a TweenSequence is the right class for animating the same attribute(s) mutations one after another. Docs reference.

GaboBrandX · Accepted Answer · 2019-07-05 12:14:10Z

You can use addStatusListener on your Animation. Check when the animation is completed and then call reverse() on your AnimationController.

If you want to, you can call reverse() inside a Future.delayed() for making a pause.

I've made this example for you:

import 'package:flutter/material.dart'; class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> with TickerProviderStateMixin { AnimationController _animationController; Animation _opacityDontWorry; @override void initState() { super.initState(); _animationController = AnimationController(duration: Duration(seconds: 1), vsync: this); _opacityDontWorry = Tween( begin: 0.0, end: 1.0, ).animate( CurvedAnimation(parent: _animationController, curve: Curves.easeIn), )..addStatusListener((status) { if (status == AnimationStatus.completed) { Future.delayed(Duration(seconds: 3), () { _animationController.reverse(); }); } }); } @override Widget build(BuildContext context) { return Scaffold( floatingActionButton: FloatingActionButton.extended( label: Text('Animate'), onPressed: () => _animationController.forward(), ), body: Center( child: AnimatedBuilder( animation: _opacityDontWorry, builder: (context, widget) { return Opacity( opacity: _opacityDontWorry.value, child: Text("Don't worry"), ); }, ), ), ); } }

UPDATE

In case you need to play this animation, and call another one after that, you can extract the opacity value to a variable. Then update that value from as many consecutive animations as you need.

 _firstAnimation = Tween( begin: 0.0, end: 1.0, ).animate( CurvedAnimation(parent: _animationController, curve: Interval(0.0, 0.20, curve: Curves.easeIn)), )..addListener(() { setState(() => _opacity = _firstAnimation.value); }); // Leave an interval pause if you need _secondAnimation = Tween( begin: 1.0, end: 0.0, ).animate( CurvedAnimation(parent: _animationController, curve: Interval(0.40, 0.60, curve: Curves.easeIn)), )..addListener(() { setState(() => _opacity = _secondAnimation.value); });

In your widget's opacity property, instead of using _firstAnimation.value use _opacity.

And if you then want another animation after that, then what is the best way to go about that? Multiple animation controllers? It seems a bit cumbersome but if that is the way...
Well, it would be helpful if you explain what you need to do. If you need to fade in, wait, and then fade out, this is the way to go. :) The same may apply for another kind of animations, of course. But maybe you're thinking about something specifically?
Specificly now I want to fade a text in, then out, then change the text and fade it in again. This can be done with the reverse I can see (had not thought about that), but for bigger combinations it seems something else is needed, I mean what if I wanted to fade out, then in, then move it or totate it? But maybe that is a different question for when I need it :)
I would like to note that you can control the animation the whole time. You can use addListener and check the current value of your animation Tween, do something when value is > than x, forward from ther again, stop, reset, etc.
I see. I'm thinking about combining staggered animation with my answer. But you'll need a little trick, because of the intervals. As you'll need a pause you should leave an empty space on your intervals. You know what I mean? If your first animation's interval is 0.0 to 0.2, the next can use 0.5 to 1.0, leaving a pause from 0.2 to 0.5 where the reverse can be called. You just need to orchestrate the animation times well.

Collectives™ on Stack Overflow

Chaining seperate animations that work on the same properties

2 Answers 2

Comments

10 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Linked

Related