interpolation-builder
v2.1.0
Published
Using interpolation-builder you can build interpolation functions for objects and arrays
Downloads
167
Maintainers
Readme
interpolation-builder
Using interpolation-builder you can build interpolation functions for objects and arrays. By default lerp is used but you can drop in custom interpolation functions also.
Usage
Example
var builder = require( 'interpolation-builder' );
var lerper = build( {
x: null, // will use linear interpolation
sub: {
x: function( percentage, start, end ) {
return 'value is: ' + ( ( end - start ) * percentage + start );
}
}
});
var start = {
x: 0,
sub: {
x: 0
}
};
var end = {
x: 100,
sub: {
x: 100
}
};
console.log( lerper( 0.5, start, end ) ); // { x: 50, sub: { x: 'value is: 50' } }
Example with Objects using sub and map functions
var builder = require( 'interpolation-builder' );
var lerper = builder();
lerper.map( [ 'x', 'y' ] ) // <- use default lerp for these properties
.map( 'z', customInterpolation1 ) // <- custom interpolation for one prop
.map( [ 'u', 'v' ], customInterpolation2 ); // <- custom for two props
var start = { x: 0, y: 0, z: 0, u: 0, v: 0 };
var end = { x: 100, y: 150, z: 100, u: 100, v: 200 };
console.log( lerper( 0.5, start, end ) ); // { x: 50, y: 75, z: 'c1 50', u: 'c2 50', v: 'c2 100' }
function customInterpolation1( time, start, end ) {
return 'c1 ' + ( ( end - start ) * time + start );
}
function customInterpolation1( time, start, end ) {
return 'c2 ' + ( ( end - start ) * time + start );
}
Example with Arrays
var builder = require( 'interpolation-builder' );
var lerper = builder();
lerper.map( [ 0, 1, 2 ] ); // <- use default lerp for these properties
var start = [ 0, 0, 0 ];
var end = [ 100, 200, 300 ];
console.log( lerper( 0.5, start, end ) ); // [ 50, 100, 150 ]
Example with sub/child objects
var start = {
inner: {
x: 0,
y: 0
}
};
var end = {
inner: {
x: 104,
y: 100
}
};
var animator = interpolator();
animator.sub( 'inner' )
.map( [ 'x', 'y' ] );
animator( 0, start, end ); // { inner: { x: 52, y: 50 } }
License
MIT, see LICENSE.md for details.