Runtime Keyframes

Each prop instance contains a keyframes instance. This is a collection of internal keyframe data.

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

To illustrate, this is what keyframes looks like:

{
  '0s': 0,
  '2s': {
    value: 100,
    ease: 'Power1.easeInOut'
  },
  '10s': 500,
  '12.5s': {
    value: 0,
    ease: 'Expo.easeOut'
  }
}

Get prop.keyframes

import { create } from 'spiritjs'

// create groups
const groups = create(data /* Spirit app copy clipboard */)

// get group
const group = groups.get('ghost')

// get first timeline
const timeline = group.timelines.at(0)

// get props
const props = timeline.props

// get prop x
const prop = props.get('x')

// get keyframes
const keyframes = prop.keyframes

Iterate

keyframes.each(keyframe => {

})

Get keyframe at time

// get keyframe at 2s
keyframes.get('2')

API

/**
* Get keyframe at time
*
* @type    {Function}
* @param   {string} time
* @returns {Keyframe}
*/
get(time)

/**
* Add keyframes
*
* @type    {Function}
* @param   {object|Keyframe|Array} keyframes
* @returns {*}
*/
add(keyframes)

/**
* Remove properties
*
* @type    {Function}
* @param   {object|Keyframe|Array} keyframes
* @returns {*}
*/
remove(keyframes)

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

/**
* Destroy this collection of keyframes
*
* @type {Function}
*/
destroy()

Add keyframes

Keyframe time needs to be unique, duplicates are not allowed. Example:

// existing keyframes:
{
  '0.05s': { ... },
  '10s':   { ... }
}

// try to add a keyframe on `0.05s`:
add({
  '0.05s': { ... }
})

// throws duplicate error, keyframe on that time already exists

toObject(ignoreEval = false)

See Timeline.toObject()

Events

You can listen to the following events:

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

keyframes.on('add', () => {})
keyframes.on('remove', () => {})

Linked list

Each keyframe can access its previous and next keyframe (keyframes are sorted by time).

Example:

{
  '0s':  0,
  '2s':  100,
  '5s':  200,
  '10s': 300
}

Cycle forward

// first keyframe
let keyframe = keyframes.get('0')

while (keyframe) {
  console.log(keyframe.value)
  keyframe = keyframe.next()
}

// outputs: 0, 100, 200, 300

Cycle backward

let keyframe = props.get('10')

while (keyframe) {
  console.log(keyframe.value)
  keyframe = keyframe.prev()
}

// outputs: 300, 200, 100, 0

Try it out in the browser. Copy and paste this in the javascript console https://spiritapp.io:

let keyframe = spirit.groups.get('ghost').timelines.at(0).props.at(0).keyframes.at(0)

while (keyframe) {
  console.log(keyframe.value)
  keyframe = keyframe.next()
}

Work in progress!

More detailed documentation is coming soon

results matching ""

    No results matching ""