Typed Keyframes

There are a number of built in subclasses of the Keyframe class for primitive types and data structures.

Number Keyframe

new NumberKeyframe (time: number, value: number, inEasing: Easing = Easing.cubic, outEasing: Easing | undefined = undefined)

The NumberKeyframe class interpolates between number values.

String Keyframe

new StringKeyframe (time: number, value: string, inEasing: Easing = Easing.cubic, outEasing: Easing | undefined = undefined)

The StringKeyframe class interpolates between string values.

Boolean Keyframe

new BooleanKeyframe (time: number, value: boolean, inEasing: Easing = Easing.cubic, outEasing: Easing | undefined = undefined, solveInterpolation = false, truthThreshold = 0.5)

The BooleanKeyframe class interpolates between boolean values. There are two ways it can interpolate between boolean values: through interpolation with a truth threshold, or through simply returning the boolean value of the current keyframe.
If solveInterpolation is true, the resulting value of the interpolate method will be solved by interpolating between the values of the current and next keyframe, where true = 1 and false = 0. Whether the resulting value is true or false is determined by the condition value > truthThreshold.

RGB Color Keyframe

new RGBColorKeyframe (time: number, value: RGBColor, inEasing: Easing = Easing.cubic, outEasing: Easing | undefined = undefined)

The RGBColorKeyframe class interpolates between RGBColor values.
The RGBColorKeyframe class contains a single custom method.

To Float Keyframe

toFloatKeyframe (): NumberKeyframe[]

The toFloatKeyframe method converts the RGBColorKeyframe to a list of NumberKeyframe values. The first value of the list corresponds to the r value, the second to the g value, and the third to the b value.

HSV Color Keyframe

new HSVColorKeyframe (time: number, value: HSVColor, inEasing: Easing = Easing.cubic, outEasing: Easing | undefined = undefined)

The HSVColorKeyframe class interpolates between HSVColor values.
The HSVColorKeyframe class contains a single custom method.

To Float Keyframe

toFloatKeyframe (): NumberKeyframe[]

The toFloatKeyframe method converts the HSVColorKeyframe to a list of NumberKeyframe values. The first value of the list corresponds to the h value, the second to the s value, and the third to the v value.

Vector3 Keyframe

new Vector3Keyframe (time: number, value: Vector3, inEasing: Easing = Easing.cubic, outEasing: Easing | undefined = undefined)

The Vector3Keyframe class interpolates between Vector3 values.
The Vector3Keyframe class contains a single custom method.

To Float Keyframe

toFloatKeyframe (): NumberKeyframe[]

The toFloatKeyframe method converts the Vector3Keyframe to a list of NumberKeyframe values. The first value of the list corresponds to the x value, the second to the y value, and the third to the z value.

List Keyframe

new ListKeyframe (time: number, value: number[], inEasing: Easing = Easing.cubic, outEasing: Easing | undefined = undefined, truncate = false)

The NumberKeyframe class interpolates between arrays of numbers. The truncate argument tells the keyframe whether or not to truncate the excess values when interpolating with a list with greater number of values than the other.
If truncate = false, the excess values will interpolate to 0.
If truncate = true, the excess values will not be returned by interpolation.\

The ListKeyframe class contains a single custom method.

To Float Keyframes

toFloatKeyframes (): NumberKeyframe[]

The toFloatKeyframe method converts the ListKeyframe to a list of NumberKeyframe values. The list contains one NumberKeyframe for each number in the list.

Object Keyframe

new ObjectKeyframe (time: number, value: object, inEasing: Easing = Easing.cubic, outEasing: Easing | undefined = undefined)

The ObjectKeyframe can interpolate between any two JSON objects. It constructs keyframes for each value in the object, including an ObjectKeyframe for each nested object. It can also detect CSS color strings and interpolate between them as colors.

Bezier Curves

There is also a Keyframe type that supports cubic Bezier interpolation.

Bezier Keyframe

new BezierKeyframe (

time: number,

value: number,

inHandle: BezierHandle | undefined = undefined,

outHandle: BezierHandle | undefined = new BezierHandle(Math.PI),

defaultMagnitude = 1

)

inHandle: The BezierHandle used to control easing into the curve (to the right of or after the keyframe). If inHandle is undefined, the keyframe will use automatic handles.
outHandle: The BezierHandle used to control easing out of the curve (to the left of or before the keyframe).
defaultMagnitude: The default magnitude of the keyframe’s handles.

The BezierKeyframe is an alternative implementation of Keyframe<number> that uses bezier handles to ease the curve rather than an Easing function from the eaz package.

Handle Restrictions

If one of the handles has too great a magnitude or an angle outside of a specific range, it could cause the curve to have multiple y values for one x value. In other words, it would fail the vertical line test and fail to be a function. In order to ensure that this is never the case to preserve the functionality of the curve, the handles are automatically restricted to this magnitude and range on configure.
If the handles are changed and configure is not called, keyframe could yield an unexpected result or throw an error.

Bezier Handles

new BezierHandle (angle: number, magnitude = 1)

Each BezierHandle contains an angle (in radians) and a magnitude.

To Cartesian

toCartesian (origin: {x: number, y: number}): {x: number, y: number}

Convert the bezier handle from polar coordinates to cartesian coordinates.

From Cartesian

fromCartesian (origin: {x: number, y: number}, coordinates: {x: number, y: number}): void

Set the angle and magnitude of the BezierHandle from its origin and cartesian coordinates.

Automatic Handles

static automatic (time: number, value: number, magnitude = 1): BezierKeyframe

The BezierKeyframe class contains a static method for easily creating bezier keyframes with automatically generated and configured handles. Automatic handles have their angles calculated to make the curve as smooth as possible.

The automaticHandles property of a BezierKeyframe dictates whether or not the keyframe’s handles are automatically generated and configured. This property can be read or written.

Read more

Keyframe CurveModifier