Easing Functions for Animation

In this article, we will delve into the core principles of easing functions for animation, exploring their mathematical foundations and how they contribute to creating seamless and captivating animations.

Basic Principle

Assuming an object in motion, positioned at 100 meters on a track, preparing to move forward to 250 meters, with a planned duration of 2 seconds. We initiate the timing at 0 seconds. As time progresses, the relationship between its position and the current time can be represented by the following function (equation):

function currentValue(time, begin, end, duration) {
    return (end - begin) * (time / duration) + begin;
}

The meaning of each parameter is as follows:

• begin (constant): the initial value of the distance (the initial value from the origin, which is 100 meters).
• end (constant): the target value, which is 250 meters.
• time (variable): the current elapsed time, calculated as current time – start time.
• duration (constant): the duration of the movement, which is 2s.

The principle of this formula is to divide the elapsed duration of the movement by the total duration of the movement to calculate the current time progress (percentage). Then, the percentage is multiplied by the total distance to convert it into the distance already covered in the current movement. Finally, the initial value is added to obtain the final progress of the movement.

Therefore, when an object starts moving at 0 seconds, according to the formula, the object is still at its original position: 150 * (0 / 2) + 100 = 100.

After 1 second of movement, the object’s position is: 150 * (1 / 2) + 100 = 175. It is exactly at the midpoint between the starting point and the endpoint.

After 2 seconds of movement, the object’s position is: 150 * (2 / 2) + 100 = 250, which is exactly the endpoint.

The portion of the formula pertaining to the proportion of time is extracted as the “factor”:

function linearFactor(time, duration) {
  return time / duration
}

function linearCurrentValue(begin, end, time, duration) {
    return (end - begin) * linearFactor(time, duration) + begin;
}

According to the aforementioned formula, the relationship between displacement and time is illustrated in the following diagram:

The secret of coefficients

In addition to the linear easing effect, there are also other effects such as ease-in, ease-out, ease-in-out, and so on. The mystery behind all these effects lies in the aforementioned “factor”.

In the linear easing effect, the coefficient is linear: time / duration. If we modify the coefficient formula to Math.pow(time / duration, 2), the coordinate graph of time and displacement is illustrated in the following figure:

Continuing the alteration of the exponent in Math.pow(time / duration, 2), we can utilize the visualization function tool mathway to graph the coordinates of x^2, x^3, x^4, and x^5 respectively.

If you find these few images familiar, then you are correct, as these four functions correspond to the following four types of easing effects:

Cubic-bezier

In CSS, it is possible to specify easing effects using Bezier curves, as illustrated in the diagram below:

By manipulating the positions of points P2 and P1, the shape of the curve can be controlled.

transition-timing-function: cubic-bezier(P1.x, P1.y, P2.x, P2.y);

A Bezier curve editor can be utilized to modify the curve.

Conclusion

The easing effects are determined by the factor of motion time.

For the implementation of easing effects other than ease-in, one can consult easing.js.

In addition to the levels of easing such as Quad, Cubic, Quart, and Quint, there are other degrees of easing available, such as Expo, Back, and Bounce. The distinction lies solely in the manner in which progress is handled within the functions. For further visual effects, one may refer to easings.net.