In this section, we will learn about interpolation. We will also have a look at non-linear interpolations so that we gain an in-depth understanding of the topic. We will then build a demo project to demonstrate what we have learned.
To define animations using a constant duration, we need to move from our number of steps concept to a time-framed concept. We want to change the value of our Width property from 300 to 80 within a certain time period (1 second).
The other change we need to acknowledge is the one from iterative or imperative programming to a more event-driven approach; that is, in a time period starting from a certain point in time and within a defined duration, each X milliseconds, we want to use some code. This code will calculate the current value our Width property should have at this moment in time. This process is called interpolation.
The following graph shows this interpolation process:
As you can see, we have...