In the next few steps, you will see how to perform two Tween animations at the same time using a single AnimationController:
- At the top of the _ShapeAnimationState class, remove the pos double, and add two new values, one for the top position and one for the left position of the ball. Also remove the animation variable, and add two animations, one for the top and one for the left values, as shown here:
double posTop = 0;
double posLeft = 0;
Animation<double> animationTop;
Animation<double> animationLeft;
- In the initState method, remove the animation object and set animationLeft and animationTop. Only add the listener to animationTop:
animationLeft = Tween<double>(begin: 0, end: 200).animate(controller);
animationTop = Tween<double>(begin: 0, end: 400).animate(controller)
..addListener(() {
moveBall();
});
- In the moveBall method, in the setState call, set posTop to the value of the animationTop animation, and do the same for posLeft...