Subclassing

subclassing keytime

Keytime is a very "bare-bones" module, and doesn't give you much out of the box. Often you will want to subclass it for your application-specific purposes, for example:

• to interpolate between CSS strings like "50%" and "25%"
• to limit or provide new easing equations
• to animate custom objects and data types, like quaternions (using spherical interpolation) or colors (in a different color-space)

example

Here is an example of subclassing keytime to provide a new interpolator. This is from the DOM demo, and it interpolates CSS strings.

var Base = require('keytime')
var inherits = require('inherits')
var lerpCSS = require('./lerp-css')

function TimelineCSS(data) {
	if (!(this instanceof TimelineCSS)) //make 'new' optional
		return new TimelineCSS(data)
	Base.call(this, data) //call parent constructor
}

inherits(TimelineCSS, Base) //inherit from Base

TimelineCSS.prototype.interpolate = function(property, frame1, frame2, t) {
	return lerpCSS(frame1.value, frame2.value, t)
}

module.exports = TimelineCSS

Typically you would override one or both of these functions:

ease(name, t)

Called to remap t with the specified easing equation. When name is not specified, t should remain unchanged (i.e. linear ease).

interpolate(property, frame1, frame2, t)

Interpolates between frame1 and frame2, using the alpha t (which has already been modified by the ease). By default, lerp-array is used. The frame1 and frame2 objects are keyframes.

The return value is a new value that matches the same type and layout as the value used in the two frames. This function will not be called when a property's default value is used, or when the playhead is sitting exactly on a keyframe (and no interpolation is necessary).

keytime/base

Most users will want to include the common easing functions in their custom timelines, which is exposed with keytime's entry point. However, if you are not using these ease functions, you can require('keytime/base') for subclassing instead, which makes no assumptions about easings (everything is assumed to be linear) and won't include them in your bundle.