Format

keytime format

The format is intended to be simple, easy to manipulate, and easy to build tools around. It does not include application-specific flags (like whether or not a property has been disabled by user). These may come through a higher-level application or tool editor.

The format is expressed as simple JS objects, so that it can be exported and imported as a JSON string.

timeline

Below is a complete timeline for an animation. A timeline is simply an array of properties.

[
	{ name: 'position', keyframes: [
		{ time: 0, value: [0, 0] },
		{ time: 2, value: [100, 100], ease: 'bounceOut' },
		{ time: 4, value: [0, 100], ease: 'expoOut' }
	] },
	{ name: 'fill', keyframes: [
		{ time: 2, value: [100, 189, 100] },
		{ time: 3, value: [255, 189, 120], ease: 'expoOut' }
	] },
	{ name: 'alpha', value: 0.75 },
	{ name: 'shape', value: [50, 50] }
]

This example timeline has four named properties. The "position" and "fill" properties are animated, and contain keyframes defining their animations. The "alpha" and "shape" properties are constant, and do not change over time.

properties

A property has a name, and optionally a value and/or keyframes.

The interpolator tries to find a value using the keyframes array, but if no keyframes exist, the value is used as a default. It's up to the application to handle instances where neither value nor keyframes is defined.

Note: Currently, properties also have an optional type hint, but this is application-specific and may be removed shortly.

keyframes

A property can have a list of keyframes to define its animation. A keyframe has a time stamp, a value, and optionally an ease hint.

The time can be in any unit; this is up to the application to handle. Upon loading the timeline, and when new keyframes are added, they will always be sorted according to their time, from low to high.

The value can also be in any format, although the default keytime timelines expect numbers or arrays of numbers. Other formats should be handled by subclassing keytime.

The ease is a hint to the keytime instance to animate using the given easing equation. By default, the entry point exposes a common set of eases using camel case (quadIn, expoInOut, linear, etc). If no ease is defined, linear is assumed.

For a pair of keyframes, the second keyframe determines the easing between the two. This means that the first keyframe in any sequence does not need an ease (it will just be ignored).

See keyframes for more details on how the keyframes are interpolated. Applications can also choose to ignore easings altogether, by subclassing keytime.