DEV Community

Cover image for Animation In Flutter: Animation Class, Tween & CurvedAnimation
Dhruv Nakum
Dhruv Nakum

Posted on • Originally published at dhruvnakum.xyz

Animation In Flutter: Animation Class, Tween & CurvedAnimation

  • 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:
  • 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. animtioninstantiate
  • 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;
//.....
}
Enter fullscreen mode Exit fullscreen mode
  • 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: animationType
  • 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;
//.....
}
Enter fullscreen mode Exit fullscreen mode
  • 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)