Easing function for animation

Simple linear motion in 2D animation is achieved by interpolating between two points and successively drawing an object at each intermediate point, as demonstrated in the example on Animating 2D graphics. However, in the real world objects move with different sorts of curved trajectories, and they also accelerate and decelerate, which you can think of as a curved trajectory of velocity in time.

The art of making animated objects seem to move naturally—called easing—is a topic that has been studied in depth. It requires using mathematics that are more complicated than simple linear interpolation. You can find many examples of different easing functions, for simulating various sorts of smooth movement.

This example uses a curved transfer function, stored in a function object, to give the impression of acceleration and deceleration to a 2D animated object. In this function there are two curved segments: one for the first half of the trajectory to simulate acceleration, and a complementary curve in the second half of the trajectory to simulate deceleration.

Simulate acceleration/deceleration

You can compare linear motion to (one particular type of) eased motion, and you can try different easing curves in the transfer function. A ggate object routes the output of the line object, either directly to the math objects for no acceleration/deceleration, or to the transfer function to simulate acceleration/deceleration.