Show:

A way to transition numeric values and arrays of numbers between start and end states. Transitions are given an easing curve and a duration. Non-numeric values are ignored.

Constructor

Core.Transitionable

(
  • value
)

Parameters:

Example:

 var transitionable = new Transitionable(0);
        
         transitionable.set(100, {duration : 1000, curve : 'easeIn'});
        
         transitionable.on('start', function(value){
             console.log(value); // 0
         });
        
         transitionable.on('update', function(value){
             console.log(value); // numbers between 0 and 100
         });
        
         transitionable.on('end', function(value){
             console.log(value); // 100
         });

Methods

delay

(
  • callback
  • duration
)

Postpone a transition, and fire it by providing it in the callback parameter.

Parameters:

  • callback Function

    Callback

  • duration Number

    Duration of delay (in millisecons)

filter

(
  • filterFn
)

Inherited from Streams.SimpleStream:

Filter converts the current stream into a new stream that only emits if the filter condition is satisfied. The function should return a Boolean.

Parameters:

  • filterFn Function
    Function to filter event payload

get

() Number | Number[]

Return the current state of the transition.

Returns:

Number | Number[]:

Current state

getVelocity

() Number | Number[]

Return the current velocity of the transition.

Returns:

Number | Number[]:

Current state

halt

()

Ends the transition in place.

isActive

() Boolean

Determine is the transition is ongoing, or has completed.

Returns:

iterate

(
  • values
  • transitions
  • [callback]
)

Iterate through the provided values with the provided transitions. Firing an optional callback when the series of transitions completes. One transition may be provided as opposed to an array when you want all the transitions to behave the same way.

Parameters:

loop

(
  • transitions
)

Loop indefinitely between values with provided transitions array.

Parameters:

  • transitions Array

    Array of transitions

Example:

transitionable.loop([ {value : 0, transition : {curve : 'easeOut', duration : 500}}, {value : 1, transition : {curve : 'spring', period : 100, damping : 0.5}} ]);

map

(
  • mapperFn
)

Inherited from Streams.SimpleStream:

Map converts the current stream into a new stream with a modified (mapped) data payload.

Parameters:

  • mapperFn Function
    Function to map event payload

pluck

(
  • key
)

Inherited from Streams.SimpleStream:

Pluck is an opinionated mapper. It projects a Stream onto one of its return values. Useful if a Stream returns an array or an object.

Parameters:

register

(
  • name
  • constructor
)

Constructor method. A way of registering other engines that can interpolate between start and end values. For instance, a physics engine.

Parameters:

  • name String

    Identifier for the engine

  • constructor Object

    Constructor for the engine

reset

(
  • value
  • [velocity]
)

Sets the value and velocity of the transition without firing any events.

Parameters:

set

(
  • value
  • [transition]
  • [callback]
)

Define a new end value that will be transitioned towards with the prescribed transition. An optional callback can fire when the transition completes.

Parameters:

  • value Number | Number[]

    End value

  • [transition] Object optional

    Transition definition

    • [curve] String optional

      Easing curve name, e.g., "easeIn"

    • [duration] String optional

      Duration of transition

  • [callback] Function optional

    Callback

setMany

(
  • transitions
)

Combine multiple transitions to be executed sequentially. Provide the transitions as an array of transition definitions.

Parameters:

  • transitions Array

    Array of transitions

Example:

transitionable.setMany([ {value : 0, transition : {curve : 'easeOut', duration : 500}}, {value : 1, transition : {curve : 'spring', period : 100, damping : 0.5}} ]);

split

(
  • splitterFn
)

Inherited from Streams.SimpleStream:

Split maps one of several streams based on custom logic. The function should return an EventEmitter.

Parameters:

unregister

(
  • name
)

Constructor method. Unregister an interpolating engine. Undoes work of register.

Parameters:

  • name String

    Identifier for the engine