- In the previous article, we saw how to use AnimationController to control our animation. We will further customize our basketball animation in this article.
- The following is an example of our earlier animation:
- Because of the lack of a smooth bouncing effect, the above animation appears strange. Let's make this animation better.
- But first, let's have a look at the basic Animation library that comes along with the Flutter SDK.
Animation:
- Animation is a core library of the Flutter. This is an abstract class. It means we won't be able to instantiate it.
- We can track the animation's completion and dismissal using an instance of the Animation class. In addition, we can check the status of the currently running animation.
- Let's first create an Animation instance in our app.
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
late Animation _animation;
//.....
}
- A value of type T is assigned to an animation. It means that we can make an animation for almost any datatypes. For example, we can make:
- In our case, we want an animation of type double. Because we want to translate the ball position which is of type double. So let's update the Animation type.
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
late Animation<double> _animation;
//.....
}
- As previously stated, Animation is an abstract class. It has no idea what is going on on-screen. It only understands the values that are passed to it and the state of that specific animation.
- The Animation provides us with more control over defining the upperBound and lowerBound values of the animation, i.e. the begin and end values.
- When the controller plays this animation, it generates interpolated values between the begin and end points. We use that interpolated value to animate our widget.
- But now comes the question of how to make an animation? To do so, let us first define Tween.
Read the rest on my website
Top comments (0)