Runtime Keyframe

Each prop instance holds a keyframes collection with Keyframe data as referenced here.

In most cases you won't need to reference this keyframe instance directly. Using the spirit.create() or spirit.load() should cover most scenarios.

A Keyframe is a simple value object, containing the time, value and ease:

{
  time:  0,
  value: 100,
  ease: 'Power2.easeInOut'
}

API

/**
* Time
* Getter/setter
*
* @type {number}
*/
time

/**
* Current value
* Getter/setter
*
* @type {*}
*/
value

/**
* Ease
* Getter/setter
*
* @type {string}
*/
ease

/**
* Access the parent list (keyframes)
*
* @type {Keyframes}
*/
list

/**
* Get previous keyframe from (linked) list
*
* @type    {Function}
* @returns {Keyframe|null}
*/
prev()

/**
* Get next keyframe from (linked) list
*
* @type    {Function}
* @returns {Keyframe|null}
*/
next()

/**
* Is value a javascript expression?
* Wrapped in curly braces
*
* @type    {Function}
* @returns {boolean}
*/
isEval()

/**
* Convert to a readable and interchangeable javascript object
*
* @type    {Function}
* @param   {boolean} ignoreEval
* @returns {object}
*/
toObject(ignoreEval = false)

/**
* Destroy this keyframe
*
* @type {Function}
*/
destroy()

List

Once a keyframe is added to the keyframes collection, keyframe.list is set. This way you can always access collection keyframes:

keyframe.list // [Keyframes]

// remove from keyframes
keyframes.remove(keyframe)

keyframe.list // null

Get previous / next keyframe

Once a keyframe is added to the keyframes collection, you can easily retrieve the previous and next keyframe:

// existing keyframes
{
  '0s': { ... },
  '2s': { ... },
  '5s': { ... }
}

let keyframe = keyframes.get('0')

keyframe = keyframe.next() // get keyframe '2s'
keyframe = keyframe.next() // get keyframe '5s'
keyframe = keyframe.next() // null

isEval()

Determine if the current value is a javascript expression.

Values wrapped in curly braces are flagged as javascript expressions, and will be evaluated on group construction.

Events

You can listen to the following events:

keyframe.on('change', () => {})
keyframe.on('change:time', () => {})
keyframe.on('change:value', () => {})
keyframe.on('change:ease', () => {})

Work in progress!

More detailed documentation is coming soon

results matching ""

    No results matching ""