EasingStyle Enum - Graphics Library

Overview

The EasingStyle enum defines various easing functions used for smooth animations. These functions control how an animation progresses over time, providing effects such as acceleration, deceleration, overshooting, and bouncing.

Enum Definition

public enum EasingStyle {
    LINEAR, SINE, QUAD, CUBIC, QUART, QUINT, EXPONENTIAL, CIRCULAR, BACK, ELASTIC, BOUNCE
}

Easing Equations

Below are the mathematical equations used to compute the progress of an animation over time (t), where t is normalized between 0 (start) and 1 (end).

1. Linear

A constant rate of change.

[ f(t) = t ]

case LINEAR:
    return t;

2. Sine

Starts slow and accelerates.

[ f(t) = 1 - \cos(\frac{t \pi}{2}) ]

case SINE:
    return 1 - Math.cos(t * Math.PI / 2);

3. Quadratic

A smooth curve accelerating.

[ f(t) = t^2 ]

case QUAD:
    return t * t;

4. Cubic

A steeper acceleration curve.

[ f(t) = t^3 ]

case CUBIC:
    return t * t * t;

5. Quartic

More pronounced acceleration.

[ f(t) = t^4 ]

case QUART:
    return t * t * t * t;

6. Quintic

Even steeper acceleration.

[ f(t) = t^5 ]

case QUINT:
    return t * t * t * t * t;

7. Exponential

Starts very slow and ramps up dramatically.

[ f(t) = 2^{10(t - 1)} ]

case EXPONENTIAL:
    return t == 0 ? 0 : Math.pow(2, 10 * (t - 1));

8. Circular

Eases with a circular motion.

[ f(t) = 1 - \sqrt{1 - t^2} ]

case CIRCULAR:
    return 1 - Math.sqrt(1 - t * t);

9. Back

Overshoots the start before easing into position.

[ f(t) = t^2 ((s+1)t - s) \text{, where } s = 1.70158 ]

case BACK:
    double s = 1.70158;
    return t * t * ((s + 1) * t - s);

10. Elastic

Oscillates back and forth before settling.

[ f(t) = -2^{10(t - 1)} \sin((t - 1.1) \frac{2\pi}{p}) ]

case ELASTIC:
    if (t == 0 || t == 1) return t;
    double p = 0.3;
    return -Math.pow(2, 10 * (t - 1)) * Math.sin((t - 1.1) * (2 * Math.PI) / p);

11. Bounce

Mimics a bouncing motion.

case BOUNCE:
    if (t > (1 - 1 / 2.75)) {
        t = 1 - t;
        return 1 - (7.5625 * t * t);
    } else if (t > (1 - 2 / 2.75)) {
        t = 1 - t - (1.5 / 2.75);
        return 1 - (7.5625 * t * t + 0.75);
    } else if (t > (1 - 2.5 / 2.75)) {
        t = 1 - t - (2.25 / 2.75);
        return 1 - (7.5625 * t * t + 0.9375);
    } else {
        t = 1 - t - (2.625 / 2.75);
        return 1 - (7.5625 * t * t + 0.984375);
    }

Visualization

Below is an example graph illustrating the easing functions.