Documentation
Core
Animation
Transform

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",
        }
    }
], {
    sync: false,
}),

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:

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

For more information about TransformDefinitions, see TransformDefinitions.

Static Methods

left

Move the image to the left side of the stage.

right

Move the image to the right side of the stage.

center

Move the image to the center of the stage.

immediate<T extends TransformDefinitions.Types>

Apply the transform immediately.

Public Methods

constructor

For more information, see Advanced Transform.

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",
        }
    }
], {
    sync: false, // do not wait for all sequences to finish
});
  • sequences: TransformDefinitions.Sequence<T>[] - An array of Sequence
  • transformConfig?: Partial<TransformDefinitions.TransformConfig> - See 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",
});

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

overwrite<T extends keyof TransformersMap = any>

Overwrite a transformer

Example:

transform.overwrite("position", (value) => {
  return {left: value.x, top: value.y};
});

we don't recommend using this method

  • key: T - The key of the transformer to overwrite. Can be one of the keys in TransformersMap.
  • transformer: (value: TransformersMap[T]) => TransformersMap[T] - The transformer function.
  • return: this

copy

Copy the transform.

  • return: Transform<T>

Next Steps

Advanced Transform→
AnimationTransition