a library for creating composable easing and envelope functions.
npm install @freder/piecewisea library for creating composable easing and envelope functions.
``yarn
yarn add @freder/piecewise
example:
easing function`javascript
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:

example:
envelope function`javascript
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
example:
mix function`javascript
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
example:
crossfade function`javascript
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
visualization
utility functions
`javascript
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
``