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,
),
),
),
),
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
});