kimi

6.0.2 • Public • Published

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.

Package Sidebar

Install

npm i kimi

Weekly Downloads

150

Version

6.0.2

License

MIT

Last publish

Collaborators

  • mikkoh