Easing

The Easing class provides a set of static methods to perform easing functions that control the rate of change over time, commonly used for animations. These functions define how an animated value changes from one point to another over a duration, influencing the perceived motion of elements in a smooth or dynamic manner.

Static Methods

linear(t, b, c, d)

static linear(t, b, c, d)

Performs a simple linear tweening function with no easing. The value changes uniformly over time.

• Parameters:

  • t (Number): The current time or frame.
  • b (Number): The beginning value.
  • c (Number): The total change in value.
  • d (Number): The total duration of the tween.

• Returns: The interpolated value at time t.

• Example:

  const value = Easing.linear(1, 0, 100, 5); // Result: 20

easeInQuad(t, b, c, d)

static easeInQuad(t, b, c, d)

Performs quadratic easing in, accelerating from zero velocity at the start. The value starts slow and increases in speed over time.

• Parameters:

  • t (Number): The current time or frame.
  • b (Number): The beginning value.
  • c (Number): The total change in value.
  • d (Number): The total duration of the tween.

• Returns: The interpolated value at time t.

• Example:

  const value = Easing.easeInQuad(1, 0, 100, 5); // Accelerates at the start

easeOutQuad(t, b, c, d)

static easeOutQuad(t, b, c, d)

Performs quadratic easing out, decelerating to zero velocity at the end. The value starts fast and slows down over time.

• Parameters:

  • t (Number): The current time or frame.
  • b (Number): The beginning value.
  • c (Number): The total change in value.
  • d (Number): The total duration of the tween.

• Returns: The interpolated value at time t.

• Example:

  const value = Easing.easeOutQuad(1, 0, 100, 5); // Decelerates at the end

easeInOutQuad(t, b, c, d)

static easeInOutQuad(t, b, c, d)

Performs quadratic easing in and out. The value accelerates until halfway, then decelerates toward the end.

• Parameters:

  • t (Number): The current time or frame.
  • b (Number): The beginning value.
  • c (Number): The total change in value.
  • d (Number): The total duration of the tween.

• Returns: The interpolated value at time t.

• Example:

  const value = Easing.easeInOutQuad(2.5, 0, 100, 5); // Accelerates then decelerates

easeInOutBack(t, b, c, d, s = 1.70158)

static easeInOutBack(t, b, c, d, s = 1.70158)

Performs easing in and out with a slight overshoot at both the start and end, creating a “back” effect. The value accelerates at the start, overshoots, and decelerates while overshooting again at the end.

• Parameters:

  • t (Number): The current time or frame.
  • b (Number): The beginning value.
  • c (Number): The total change in value.
  • d (Number): The total duration of the tween.
  • s (Number, optional): The overshoot amount, with a default value of 1.70158.

• Returns: The interpolated value at time t.

• Example:

  const value = Easing.easeInOutBack(2.5, 0, 100, 5); // Has a back effect on easing

Example Usage

// Using Easing functions for animations
const startValue = 0;
const endValue = 100;
const duration = 5;

// Example of linear easing
const currentValue = Easing.linear(
  1,
  startValue,
  endValue - startValue,
  duration
);

// Example of quadratic ease-in
const easedInValue = Easing.easeInQuad(
  1,
  startValue,
  endValue - startValue,
  duration
);

// Example of ease-in-out-back with overshoot
const easedInOutBackValue = Easing.easeInOutBack(
  2.5,
  startValue,
  endValue - startValue,
  duration
);

Notes

• These easing functions are commonly used for smooth animations and transitions in UI elements, games, or visual effects.
• Each method calculates the interpolated value based on the current time (t), the starting value (b), the total change in value (c), and the duration (d).
• The easeInOutBack() function includes an optional s parameter to control the overshoot effect, giving flexibility for how much the easing overshoots and pulls back.