Usage

As mentioned in the introduction, interpolation is very often applied in an animation loop, slowly nudging a value to some target value. We adjust the interpolation ‘amount’ value to set how quickly the target should be reached.

Interpolators

Using the Numbers.interpolate function alone, we would have to keep track of current value, target value and the amount to interpolate by.

To simplify, there are two interpolators - Numbers.interpolatorStepped and Numbers.interpolatorInterval - which help by wrapping all this up. They keep track of interpolation progress and return a function which simply yields the current value.

// Step from 0->1 in increments of 0.10
const value = interpolatorStepped(0.1);

value(); // First time will be 0
value(); // Second time will be 0.1
...etc
value(); // Last time ought to be 1

Like interpolate you can use custom start and points:

// Step from 100->200 in increments of 0.10
const value = interpolateStepped(0.1, 100, 200);

When interpolation has completed, the function will just keep returning the final value.

The stepped version increments each time it is called. This means that the rate by which you call it determines how quickly the range completes.

Alternatively, use Numbers.interpolatorInterval . Rather than an amount to increment by, the first parameter is the time to progress through the range.

// Step from 0->1 over one minute
const value = interpolatorInterval({ mins: 1});
// Step from 125->678 over 1000 milliseconds.
const value = interpolatorInterval(1000, 125, 678);