node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »

kimi

kimi

experimental

Define states with values and kimi will drive between the states

Usage

NPM

Example

var kimi = require( './..' );
var driver = kimi( {
 
  onUpdate: onUpdate,
  onState: onState
});
 
// define some places for the driver 
//  
// Parameters: 
// first param is the name of the place/state 
// second param is the value of that state/place 
driver.state( 'alpha', [ 0, 100, 0 ] );
driver.state( 'idle', [ 300, 200, 0.5 ] );
driver.state( 'rollOver', [ 100, 200, 1 ] );
driver.state( 'omega', [ 0, 300, 0 ] );
 
// define a map for the driver to drive along 
// fromTo defines the direction you can drive from states and how to drive 
//  
// Parameters: 
// first param is the start location 
// second param is the end location 
// third param is the distance in seconds between locations 
// fourth param will be a function which will be used to interpolate values 
driver.fromTo( 'alpha', 'idle', 3, interpolate );
driver.fromTo( 'idle', 'rollOver', 0.5, interpolate );
driver.fromTo( 'rollOver', 'idle', 5, interpolate );
driver.fromTo( 'idle', 'omega', 0.5, interpolate );
 
// set the initial state for the driver 
driver.init( 'alpha' );
 
// calling the go function will change from the current state to the next 
// you can call it at any point to change where you're going 
// the driver always respects the map 
driver.go( 'rollOver', function( value, time ) {
 
  console.log( '---- finished alpha -> rollOver', value );
});
 
// the following will show how `set` works 
window.addEventListener('mousedown', function() {
  
  // this will cause kimi to just jump to this state and kill all animations 
  driver.set('idle');
});
 
 
// value comes from the interpolate function and time is the current time (in seconds) 
// here you might do such things as update the look 
function onUpdate( value, state ) {
 
  console.log( 'time', time );
  console.log( 'x', value[ 0 ] );
  console.log( 'y', value[ 1 ] );
  console.log( 'z', value[ 2 ] );
}
 
// onState will be called when we arrive at a different place 
function onState( value, state ) {
 
  console.log( state, value );
}
 
// animator function should return the value at the specific percentage 
function interpolate( percentage, start, end ) {
 
  var rVal = [];
 
  start.forEach( function( startValue, i ) {
 
    var endValue = end[ i ];
 
    rVal[ i ] = ( endValue - startValue ) * percentage + startValue;
  });
 
  return rVal;
}

License

MIT, see LICENSE.md for details.