Transform

⚠️

This page is under construction.

Transform controls the appearance of an image, like position, rotation, and scale.

An example of a transform:

// The character will move down and up
new Transform<TransformDefinitions.ImageTransformProps>([
    {
        props: {
            position: {
                yoffset: -10, // move down 10 pixels in 120ms with easeOut
            }
        },
        options: {
            duration: 120,
            ease: "easeOut",
        }
    },
    {
        props: {
            position: {
                yoffset: 0, // move back to the original position in 100ms with easeOut
            }
        },
        options: {
            duration: 100,
            ease: "easeOut",
        }
    }
], {
    repeat: 2,
}),

The first parameter of Transform is an array of sequences. The second parameter is an object that contains the options of the transform.

A sequence of transformations is made of props and options:

props is an object that contains the properties of the transformation. Like position, rotation, and scale.
options is an object that contains the options of the transformation. Like duration and ease.

Transform Properties

For a list of properties, see TransformDefinitions.

Static Methods

left

Move the image to the left side of the stage.

duration: number - The duration of the movement in milliseconds.
easing?: TransformDefinitions.EasingDefinition - See TransformDefinitions.EasingDefinition

right

Move the image to the right side of the stage.

duration: number - The duration of the movement in milliseconds.
easing?: TransformDefinitions.EasingDefinition - See TransformDefinitions.EasingDefinition

center

Move the image to the center of the stage.

duration: number - The duration of the movement in milliseconds.
easing?: TransformDefinitions.EasingDefinition - See TransformDefinitions.EasingDefinition

immediate<T extends TransformDefinitions.Types>

Apply the transform immediately.

props: SequenceProps<T> - A single TransformDefinitions.SequenceProps
Returns Transform<T>

Public Methods

constructor<T extends TransformDefinitions.Types>

Overload 1 of 2

This overload takes an array of sequences.

Example:

new Transform<TransformDefinitions.ImageTransformProps>([
    {
        props: {
            position: {
                xalign: 0.3, // go to left in 120ms with easeOut
            }
        },
        options: {
            duration: 120,
            ease: "easeOut",
        }
    },
    {
        props: {
            position: {
                xalign: 0.6, // go to right in 100ms with easeOut
            }
        },
        options: {
            duration: 100,
            ease: "easeOut",
        }
    }
], {
    repeat: 2,
});

sequences: TransformDefinitions.Sequence<T>[] - An array of Sequence
transformConfig?: Partial<TransformDefinitions.TransformConfig> - Transform Config

Overload 2 of 2

This overload takes a single sequence.

Example:

new Transform<TransformDefinitions.ImageTransformProps>({
    position: {
        xalign: 0.3, // go to left in 120ms with easeOut
    }
}, {
    duration: 120,
    ease: "easeOut",
});

props: SequenceProps<T> - A single TransformDefinitions.SequenceProps
options?: Partial<TransformDefinitions.CommonTransformProps> - A single TransformDefinitions.CommonTransformProps

repeat

Repeat the transform.

Example:

transform
  .repeat(2)
  .repeat(3)
// repeat 6 times

n: number - The number of times to repeat the transform.
return: this

copy

Copy the transform.

return: Transform<T>

Animation Transition