Easing Functions

Milease supports the following types of easing functions:

EaseEnum.cs

public enum EaseFunction
{
    Linear, Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back, Elastic, Bounce, Bezier
}

The supported easing types are:

EaseEnum.cs

public enum EaseType
{
    In,     // Starts slow and speeds up
    Out,    // Starts fast and slows down
    IO      // Starts slow, speeds up, then slows down again
}

What Is Easing?

Simply put, easing controls the speed variations during each small segment of an animation.

Why Do We Need Easing?

Take a simple example — if you try to pull out a drawer at a constant speed, it feels stiff and mechanical.

In reality, when we pull out a drawer, the speed changes over time — it starts fast, then gradually slows down and stops.

Easing adds this natural dynamic feel to what would otherwise be uniform motion, making animations more lively and realistic.

Linear easing, which moves at a constant speed, is the stiffest and least natural form of movement — it's generally better to avoid it.

The Mathematics Behind Easing Functions

Assume a car moves along the x-axis from point $(a, 0)$ to $(b, 0)$ over the time interval $t_1$ to $t_2$.

At any time $t$ such that $t_1 \leq t \leq t_2$, the position of the car can be described as:

$$x(t) = a + (b - a) \cdot p$$

Here, $p$ represents the progress ratio relative to the entire movement, defined as:

$$p = \frac{t - t_1}{t_2 - t_1}$$

To achieve non-linear motion (i.e., easing), we introduce an easing function $e(p)$. The motion equation becomes:

$$x(t) = a + (b - a) \cdot e(p)$$

The domain of $e(p)$ is typically $[0, 1]$, and its range is also generally constrained to $[0, 1]$, although certain types (like Back) may slightly exceed this to simulate physical effects like "overshoot" or "rebound."

Examples of common easing functions:

• Linear easing:

  $$e(p) = p$$

• In-Sine easing:

  $$e(p) = \sin\left(\frac{p \cdot \pi}{2}\right)$$

Different easing functions can simulate acceleration, deceleration, bouncing, overshooting, and other natural motion effects. They are essential tools in designing animation curves.

Visualizing Easing Functions

For detailed graphs and characteristics of easing functions, refer to: https://easings.net/