Easing

The Easing class contains every easing method, as well as a number of static methods used to easily generate new Easing objects and a handful of predefined Easing objects for easy accessibility.

Constructor

Easing(inFunction: (t: number) => number)

The constructor for Easing objects takes an inFunction, the function used to calculate eased time into the curve. The out and inOut functions can be generated using the given in function.

TypeScript

import { Easing } from 'eaz';

const myEasing: Easing = new Easing((t: number) => t ** 2);

JavaScript

import { Easing } from 'eaz';

const myEasing = new Easing(t => t ** 2);

An easing function should ideally return a value equal to or approximately 0 at time = 0, and a value equal to or approximately 1 at time = 1.

Methods

in(t: number): number

The function used to calculate eased time into the curve

TypeScript

import { Easing } from 'eaz';

const cubicEasing: Easing = Easing.cubic;
const result: number = cubicEasing.in(0.5); // Expected value: 0.125

JavaScript

import { Easing } from 'eaz';

const cubicEasing = Easing.cubic;
const result = cubicEasing.in(0.5); // Expected value: 0.125

Visualization

Easing.cubic.in evaluated from 0 to 1 drawn as a line using DemoImage

The in method is evaluated over the first half of the curve, when time < 0.5, and will usually have upwards concavity

out(t: number): number

The function used to calculate eased time out of the curve, generated using the in function

TypeScript

import { Easing } from 'eaz';

const cubicEasing: Easing = Easing.cubic;
const result: number = cubicEasing.out(0.5); // Expected value: 0.875

JavaScript

import { Easing } from 'eaz';

const cubicEasing = Easing.cubic;
const result = cubicEasing.out(0.5); // Expected value: 0.875

Visualization

Easing.cubic.out evaluated from 0 to 1 drawn as a line using DemoImage

The out method is evaluated over the first half of the curve, when time > 0.5, and will usually have downwards concavity

inOut(t: number): number

The function used to calculate the eased time into the function (where time < 0.5) and subsequently out of the function (where time > 0.5)

TypeScript

import { Easing } from 'eaz';

const cubicEasing: Easing = Easing.cubic;
const result: number = cubicEasing.inOut(0.4); // Expected value: 0.256

JavaScript

import { Easing } from 'eaz';

const cubicEasing = Easing.cubic;
const result = cubicEasing.inOut(0.4); // Expected value: 0.256

Visualization

Easing.cubic.inOut evaluated from 0 to 1 drawn as a line using DemoImage

inverse(): Easing

Returns a new Easing object for which the in and out functions are reversed

TypeScript

import { Easing } from 'eaz';

const cubicEasing: Easing = Easing.cubic;
const result: number = cubicEasing.in(0.5); // Expected value: 0.125
const inverseResult: number = cubicEasing.inverse().out(0.5); // expected value: 0.125

JavaScript

import { Easing } from 'eaz';

const cubicEasing: Easing = Easing.cubic;
const result: number = cubicEasing.in(0.5); // Expected value: 0.125
const inverseResult: number = cubicEasing.inverse().out(0.5); // expected value: 0.125

Static Methods

inOut(inEasing: Easing, outEasing: Easing, t: number): number

Calculates the in-out eased time of the curve using two different Easing objects for the in and out functions

TypeScript

import { Easing } from 'eaz';

const cubicEasing: Easing = Easing.cubic;
const linearEasing: Easing = Easing.linear;
const result: number = Easing.inOut(cubicEasing, linearEasing, 0.75); // Expected value: 0.6

JavaScript

import { Easing } from 'eaz';

const cubicEasing = Easing.cubic;
const linearEasing = Easing.linear;
const result = Easing.inOut(cubicEasing, linearEasing, 0.75); // Expected value: 0.6

Visualization

Easing.inOut evaluated from 0 to 1 using cubic in-easing and linear out-easing

interpolate(inEasing: Easing, outEasing: Easing, t: number, smoothing: number = 0.25): number

Calculates the in-out eased time of the curve using two different Easing objects for the in and out functions with a smooth the transition between the in and out function

TypeScript

import { Easing } from 'eaz';

const cubicEasing: Easing = Easing.cubic;
const linearEasing: Easing = Easing.linear;
const result: number = Easing.interpolate(cubicEasing, linearEasing, 0.6); // Expected value: 0.6294912

JavaScript

import { Easing } from 'eaz';

const cubicEasing = Easing.cubic;
const linearEasing = Easing.linear;
const result = Easing.interpolate(cubicEasing, linearEasing, 0.6); // Expected value: 0.6294912

Visualization

Easing.interpolate evaluated from 0 to 1 using cubic in-easing and linear out-easing

Calling Easing.interpolate with a smoothing value of 0 will return the equivalent of Easing.inOut