Realistic animations with easing
Until now, we animated all attribute changes with the same time step size. However, all physical realistic animations are accelerated or decelerated; therefore, the animation over time is not linear anymore. If we want to create plausible and realistic animations, we have to adapt the linear step size with a nonlinear easing function.
Easing functions describe the change of a value over time, where value is the property that we want to animate. Let's imagine the transition of a ball from position 0 (left-hand side) to position 1 (right-hand side), the ball moves from left to right. If the ball moves with a constant speed from left to right, we call it a linear transition (or linear easing).
We can also visualize this. Let's assume that the whole animation takes 1 second and every 0.2 seconds we take a picture of the ball in the scene. We can see that the position changes linearly with a step size of 0.2 because of the constant speed. We can see this linear...