vector-keyframes
Interpolate between any number of scalar, 2d, or 3d vector keyframes with a focus on colors
Installation
npm install vector-keyframes
or
yarn add vector-keyframes
Examples
See examples.js
// Import the module and create some library aliases.const vk = const vector3d = vkvector3dconst util = vkutil // Define some keyframes ordered by stop, low to high.const keyframes = stop: 0 value: 0 0 255 stop: 05 value: 0 255 0 stop: 1 value: 0 0 255 // Pass the keyframes and the time parameter to interpolate.const result = vector3dconsoleconsoleconsole
scalar
scalar
provides a set of interpolation methods that vector2d
and vector3d
are built on.
const vk = const scalar = vkscalar const keyframes = stop: 0 value: 0 stop: 05 value: 1 stop: 1 value: 0 console console console console console
Output:
linear (t=0): 0
linear (t=0.5): 1
linear (t=1): 0
linear (t=0.1): 0.2
smooth (t=0.1): 0.10400000000000002
vector2d
vector2d
iterpolates between 2d vectors.
const vk = const vector2d = vkvector2d const keyframes = stop: 0 value: 0 100 stop: 05 value: 100 100 stop: 1 value: 100 0 console console console console console
Output:
linear (t=0): [ 0, 100 ]
linear (t=0.5): [ 100, 100 ]
linear (t=1): [ 100, 0 ]
linear (t=0.1): [ 20, 100 ]
smooth (t=0.1): [ 10.400000000000002, 100 ]
vector3d
vector3d
interpolates between 3d vectors. The util
library provides some conversion helpers.
const vk = const vector3d = vkvector3dconst util = vkutil const keyframes = stop: 0 value: 0 0 255 stop: 05 value: 0 255 0 stop: 1 value: 0 0 255 let result = vector3dconsoleconsoleconsole result = vector3dconsoleconsoleconsole result = vector3dconsoleconsoleconsole
Output:
vector (t=0.25): [ 0, 127.5, 127.5 ]
rgb color (t=0.25): rgb(0,128,128)
hex color (t=0.25): #008080
vector (t=0.5): [ 0, 255, 0 ]
rgb color (t=0.5): rgb(0,255,0)
hex color (t=0.5): #00ff00
vector (t=0.9): [ 0, 51, 204 ]
rgb color (t=0.9): rgb(0,51,204)
hex color (t=0.9): #0033cc
custom
Custom interpolation can be achieved by providing a base library and defining certain methods within:
const vk = const scalar = vkscalar // Create a base 'alpha' library which defines its own interpolation// methods, making use of the ones in the 'scalar' lib.const alpha = { return '*' } { return vkscalar } { return vkscalar } { const result = vkscalar return String } // Use the newly defined 'alpha' library.const keyframes = stop: 0 value: 'a' stop: 05 value: 'z' stop: 1 value: 'a' console console console console console
Output:
linear (t=0): a
linear (t=0.5): z
linear (t=1): a
linear (t=0.1): f
smooth (t=0.1): d