变换

⚠️

此页面正在建设中

变换控制图像的外观，如位置、旋转和缩放

变换的示例：

// 角色将上下移动
new Transform<TransformDefinitions.ImageTransformProps>([
    {
        props: {
            position: {
                yoffset: -10, // 在 120 毫秒内向下移动 10 像素，使用 easeOut
            }
        },
        options: {
            duration: 120,
            ease: "easeOut",
        }
    },
    {
        props: {
            position: {
                yoffset: 0, // 在 100 毫秒内移回原始位置，使用 easeOut
            }
        },
        options: {
            duration: 100,
            ease: "easeOut",
        }
    }
], {
    repeat: 2,
}),

Transform 的第一个参数是一个序列数组。第二个参数是一个包含变换选项的对象

一系列变换由 props 和 options 组成：

props 是一个包含变换属性的对象，如 position、rotation 和 scale
options 是一个包含变换选项的对象，如 duration 和 ease

变换属性

有关属性列表，请参见 TransformDefinitions

静态方法

left

将图像移动到舞台的左侧

duration: number - 移动的持续时间，以毫秒为单位
easing?: TransformDefinitions.EasingDefinition - 参见 TransformDefinitions.EasingDefinition

right

将图像移动到舞台的右侧

duration: number - 移动的持续时间，以毫秒为单位
easing?: TransformDefinitions.EasingDefinition - 参见 TransformDefinitions.EasingDefinition

center

将图像移动到舞台的中心

duration: number - 移动的持续时间，以毫秒为单位
easing?: TransformDefinitions.EasingDefinition - 参见 TransformDefinitions.EasingDefinition

immediate<T extends TransformDefinitions.Types>

立即应用变换

props: SequenceProps<T> - 单个 TransformDefinitions.SequenceProps
返回 Transform<T>

公共方法

constructor<T extends TransformDefinitions.Types>

有关更多信息，请参见高级变换

重载 1 / 2

此重载接受一个序列数组

示例：

new Transform<TransformDefinitions.ImageTransformProps>([
    {
        props: {
            position: {
                xalign: 0.3, // 在 120 毫秒内向左移动，使用 easeOut
            }
        },
        options: {
            duration: 120,
            ease: "easeOut",
        }
    },
    {
        props: {
            position: {
                xalign: 0.6, // 在 100 毫秒内向右移动，使用 easeOut
            }
        },
        options: {
            duration: 100,
            ease: "easeOut",
        }
    }
], {
    repeat: 2,
});

sequences: TransformDefinitions.Sequence<T>[] - 序列数组
transformConfig?: Partial<TransformDefinitions.TransformConfig> - 变换配置

重载 2 / 2

此重载接受单个序列

示例：

new Transform<TransformDefinitions.ImageTransformProps>({
    position: {
        xalign: 0.3, // 在 120 毫秒内向左移动，使用 easeOut
    }
}, {
    duration: 120,
    ease: "easeOut",
});

props: SequenceProps<T> - 单个 TransformDefinitions.SequenceProps
options?: Partial<TransformDefinitions.CommonTransformProps> - 单个 TransformDefinitions.CommonTransformProps

repeat

重复变换

示例：

transform
  .repeat(2)
  .repeat(3)
// 重复 6 次

n: number - 重复变换的次数
return: this

copy

复制变换

return: Transform<T>

动画过渡