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,
}),

or using commit-chaining:

Tranform.create()
  .position({ yoffset: -10 })
  .commit({ duration: 120, ease: "easeOut" })
 
  .position({ yoffset: 0 })
  .commit({ duration: 100, ease: "easeOut" })

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>

create<T extends TransformDefinitions.Types>

Create a new transform with the given config. The sequences will be empty.

config?: Partial<TransformDefinitions.TransformConfig> - The config for the transform. See TransformDefinitions.TransformConfig
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>

commit

Commits all staged changes to the transform sequence. This method will create a new sequence from all pending changes that have been staged via chained methods. If there are no staged changes, this method will return the current instance without modification. After committing, the staged changes array will be cleared.

Example:

transform
  .position({ x: 100, y: 100 })
  .opacity(1).commit() // will create a new sequence with opacity 1 and position x: 100, y: 100
  .position({ x: 200, y: 200 })
  .opacity(0).commit({ duration: 1000 }) // will create a new sequence with opacity 0 and position x: 200, y: 200 with a duration of 1 second

Note: The staged changes will be committed before animation starts to ensure the latest changes are applied.

options?: Partial<TransformDefinitions.SequenceOptions> - The options for the sequence. See TransformDefinitions.SequenceOptions
return: this

scale

Scale the current staging sequence.

scale: TransformDefinitions.Types["scale"] - The scale of the transform. See TransformDefinitions.Types
return: this

rotation

Rotate the current staging sequence.

rotation: TransformDefinitions.Types["rotation"] - The rotation of the transform. See TransformDefinitions.Types
return: this

position

Set the position of the current staging sequence.

position: TransformDefinitions.Types["position"] - The position of the transform. See TransformDefinitions.Types
return: this

opacity

Set the opacity of the current staging sequence.

opacity: TransformDefinitions.Types["opacity"] - The opacity of the transform. See TransformDefinitions.Types
return: this

fontColor

Set the font color of the current staging sequence.

fontColor: TransformDefinitions.Types["fontColor"] - The font color of the transform. See TransformDefinitions.Types
return: this

Animation Transition