Introduction to Animation Curves

In this series of articles, we will deep dive into how animations work in Flutter. This three part series aims at providing an in-depth guide about what exactly happens under the hood when it comes to just about any type of animation in Flutter.

By the end of this series, you should be able to imagine what actually happens behind the scenes and thus readily get used to using the abstractions offered by Flutter, and any Flutter animations code you come across, it would no longer be a mystery of what all must be happening because of any piece of code.

Introduction to Animation Curves

Animation is all about updating the properties of a widget periodically at a certain speed.

If we look a bit deeper at what we mean by updating the properties of a widget periodically, we would want a mapping of what would be the value of the property after a given amount of time has elapsed, since the beginning of the animation ,i.e., we would want a function f which could be used to let us know what should be the value of the property of the widget when the function is provided with a certain elapsed time.

f : Elapsed time -> Property

Consider the height property of a widget that we want to update from 0px to 100px, over a duration of 5s.

Consider the following empty graph which represents Time (in seconds) on its X-axis, and Height (in pixels) on its Y-axis.

We could fill in the area of the empty graph with any curve of our choice.

The curve which we use determines how the height of the widget would change with time, which in turn determines how the animation effect would turn out to be. There could be infinitely many possible curves to fill this area of the empty graph.

Some of the many commonly used curves would be

I drew these curves by leveraging Flutter’s canvas API to illustrate several commonly used and popular curves available. These curves have been very commonly used when it comes to front-end animations, be it with CSS transitions or Flutter’s Curves.

These curves have been quite popular because they have been designed by taking inspiration from the nature around us and thus give a feel of realistic or natural animation effect to our human eyes.

If you consider for example the bounce-out curve from above, you would relate it well with an effect that comes when you release a ball from a certain height and let it undergo several bounces and finally rest on the ground.

There have been several experiments that studied specifically this particular effect on a ball when released from an initial height above the ground and let it bounce until it comes to rest. These experiments could study the variations in the height of the ball with time.

Below is a graph representing the changes in the height property of the ball from the ground, with elapsed time since the time the ball has been released.

continue here