Builders

The Curve class contains static methods that facilitate the creation of simple curves. A curve generated by a builder contains only two keyframes.

Generic Builder

static builder <T> (

KeyframeType: new (time: number, value: T, easing: Easing) => Keyframe<T>,

inValue: T,

outValue: T,

duration = 1,

easing = eaz.Easing.cubic,

): Curve<T>

KeyframeType: The constructor of the Keyframe type to be used in the generated curve.
inValue: The initial value of the curve.
outValue: The final value of the curve.
duration: The duration of the curve. Since the start time will always be 0, this value is also the time value of the final keyframe.
easing: The easing function used to ease between the first and last keyframe.\

Easing

The curves module uses eaz for easing functions. For further documentation on eaz see its official documentation on GitBook.

import { Curve, NumberKeyframe } from 'curves';

// Construct a curve using the regular Curve constructor
const curve: Curve<number> = new Curve<number>(
    [
        new NumberKeyframe(0, 0, Easing.linear),
        new NumberKeyframe(5, 10, Easing.linear),
    ], // Keyframes
);

// Construct the same curve using the builder method
const generatedCurve: Curve<number> = Curve.builder<number>(
    NumberKeyframe,
    0,
    10,
    5,
    Easing.linear
);

Typed Builders

The Curve class also contains builder methods for specific types. The main difference between these builders and the generic builder method is that a keyframe type is automatically chosen for each typed builder.

Float Builder

static floatBuilder (

inValue: number,

outValue: number,

duration = 1,

easing = eaz.Easing.cubic,

): Curve<number>

The floatBuilder method returns a curve with keyframes constructed using the NumberKeyframe class.

Boolean Builder

static booleanBuilder (

inValue: boolean,

outValue: boolean,

duration = 1,

easing = eaz.Easing.cubic,

): Curve<boolean>

The booleanBuilder method returns a curve with keyframes constructed using the BooleanKeyframe class.

String Builder

static stringBuilder (

inValue: string,

outValue: string,

duration = 1,

easing = eaz.Easing.cubic,

): Curve<string>

The stringBuilder method returns a curve with keyframes constructed using the StringKeyframe class.

RGB Color Builder

static rgbColorBuilder (

inValue: RGBColor,

outValue: RGBColor,

duration = 1,

easing = eaz.Easing.cubic,

): Curve<RGBColor>

The rgbColorBuilder method returns a curve with keyframes constructed using the RGBColorKeyframe class.

HSV Color Builder

static hsvColorBuilder (

inValue: HSVColor,

outValue: HSVColor,

duration = 1,

easing = eaz.Easing.cubic,

): Curve<HSVColor>

The hsvColorBuilder method returns a curve with keyframes constructed using the HSVColorKeyframe class.

Vector3 Builder

static vector3Builder (

inValue: Vector3,

outValue: Vector3,

duration = 1,

easing = eaz.Easing.cubic,

): Curve<Vector3>

The vector3Builder method returns a curve with keyframes constructed using the Vector3Keyframe class.

List Builder

static listBuilder (

inValue: number[],

outValue: number[],

duration = 1,

easing = eaz.Easing.cubic,

): Curve<number[]>

The listBuilder method returns a curve with keyframes constructed using the ListKeyframe class.

Object Builder

static objectBuilder (

inValue: object,

outValue: object,

duration = 1,

easing = eaz.Easing.cubic,

): Curve<object>

The objectBuilder method returns a curve with keyframes constructed using the ObjectKeyframe class.

Bezier Builder

static bezierBuilder (

inValue: number,

outValue: number,

duration = 1,

handleMagnitude = 1,

automatic = false,

): Curve<number>

The bezierBuilder method returns a curve with keyframes constructed using the BezierKeyframe class.

Curve Presets

The Curves class also contains a few methods that take no arguments and return simple prebuilt curves.

increaseFloat

static increaseFloat (): Curve<number>

Returns a Curve<number> that increases from 0 to 1 over a duration of 1.

decreaseFloat

static decreaseFloat (): Curve<number>

Returns a Curve<number> that decreases from 1 to 0 over a duration of 1.

increaseColor

static increaseColor (): Curve<RGBColor>

Returns a Curve<RGBColor> that increases from black (#000000) to white (#ffffff) over a duration of 1.

decreaseColor

static decreaseColor (): Curve<RGBColor>

Returns a Curve<RGBColor> that decreases from white (#ffffff) to black (#000000) over a duration of 1.