Skip to main content

KeyFrames

Manages key frame animation data. Associates time points with arbitrary data and provides methods to access key times and data, and an interpolation factor, based on the current time.

Usage​

const keyFrames = new KeyFrames([
  [0, {val1: [1, 0, 1], val2: 0}],
  [500, {val1: [1, 1, 1], val2: 2}],
  [800, {val1: [0, 0, 1], val2: 1}],
  [1200, {val1: [0, 1, 0], val2: 4}],
  [1500, {val1: [1, 0, 1], val2: 5}]
]);

keyFrames.setTime(1000);

keyFrames.startIndex; // => 2                            (i.e. key frame at time=800)
keyFrames.endIndex; // => 3                            (i.e. key frame at time=1200)
keyFrames.factor; // => 0.5                          (i.e. halfway between 800 and 1200)
keyFrames.getStartTime(); // => 800                          (i.e. time at index 2)
keyFrames.getEndTime(); // => 1200                         (i.e. time at index 3)
keyFrames.getStartData(); // => { val1: [0, 0, 1], val2: 1}  (i.e. data at index 2)
keyFrames.getEndData(); // => { val1: [0, 1, 0], val2: 4}  (i.e. data at index 3)

Properties​

  • startIndex (Number): Current start key frame index (i.e. the index of the key frame being interpolated from).
  • endIndex (Number): Current end key frame index (i.e. the index of the key frame being interpolated to).
  • factor (Number): A value between 0 and 1 representing the interpolation factor between the start and end key frame pair.

Methods​

constructor(keyFrameData: Array)​

Takes an array of [time, data] pairs to initialize the key frames.

setKeyFrames(keyFrameData: Array)​

Replaces the current set of key frames with a new one. Takes the same argument as the constructor.

getStartTime() : number​

Returns the time at the current start key frame index.

getEndTime() : number​

Returns the time at the current end key frame index.

getStartData() : Any​

Returns the data at the current start key frame index (i.e. the data being interpolated from).

getEndData() : Any​

Returns the data at the current end key frame index (i.e. the data being interpolated to).

setTime(time: number)​

Set the current time of the key frames.