a library for creating composable easing and envelope functions.
# yarn
yarn add @freder/piecewise
# npm
npm install --save @freder/piecewise
const piecewise = require('@freder/piecewise');
function identity(t) {
return t;
}
function always(c) {
return (t) => c;
}
const piecewiseEasingFn = piecewise.easing([
{
tInterval: [0, 0.5],
tMap: [0, 1], // optional
easingFn: identity,
},
{
tInterval: [0.5, 0.8],
easingFn: always(1),
},
{
tInterval: [0.8, 1],
tMap: [1, 0], // reverse
easingFn: identity,
},
]);tInterval is mapped to tMap, with which easingFn is called. easingFn only takes one argument t.
visualization:
const piecewiseEnvelopeFn = piecewise.easing([
{
tInterval: [0, 0.5],
tMap: [0, 1],
easingFn: identity,
},
{
tInterval: [0.5, 1],
tMap: [1, 0],
easingFn: identity,
},
]);
const finalFn = piecewise.envelope(piecewiseEnvelopeFn, piecewiseEasingFn);envelope returns the product of the values of an envelope function and an easing function at time t.
visualization:
grey: easing function
red: envelope function
black: resulting function
const f1 = identity;
const f2 = always(1);
const finalFn = piecewise.mix(f1, f2, 0.7);mix returns a new function that calculates the weighted mean of two functions at time t.
visualization:
grey: f1, f2
black: resulting function
const easingFn = piecewise.easing([
{
tInterval: [0, 0.6],
tMap: [0, 1],
easingFn: always(0),
},
{
tInterval: [0.6, 0.8],
tMap: [0, 1],
easingFn: identity,
},
{
tInterval: [0.8, 1],
tMap: [0, 1],
easingFn: always(1),
},
]);
const f1 = always(0.75);
const f2 = always(0.25);
const finalFn = piecewise.crossfade(easingFn, f1, f2);crossfade mixes two functions and is controlled by easingFn.
visualization:
grey: f1, f2
red: easing function
black: resulting function
const easing = require('easing-js');
const { utils } = require('@freder/piecewise');
// wrap penner easing function to only be a function of `t`:
const wrappedEasingFn = utils.wrapPennerFunction(easing.linear);
wrappedEasingFn(0.7); // → 0.7