文档
核心
动画
变换

变换

⚠️

此页面正在建设中

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

变换的示例：

// 角色将上下移动
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,
}),

或使用事务链式调用：

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

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

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

变换属性

有关属性列表，请参见 TransformDefinitions

静态方法

left

将图像移动到舞台的左侧

right

将图像移动到舞台的右侧

center

将图像移动到舞台的中心

immediate<T extends TransformDefinitions.Types>

立即应用变换

create<T extends TransformDefinitions.Types>

使用给定的配置创建一个新的变换。序列将为空。

公共方法

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

repeat

重复变换

示例：

transform
  .repeat(2)
  .repeat(3)
// 重复 6 次
  • n: number - 重复变换的次数
  • return: this

copy

复制变换

  • return: Transform<T>

commit

提交所有暂存的更改到变换序列。此方法将从所有通过链式方法暂存的待处理更改创建一个新的序列。如果没有暂存的更改，此方法将返回当前实例而不进行修改。提交后，暂存的更改数组将被清除。

示例：

transform
  .position({ x: 100, y: 100 })
  .opacity(1).commit() // 将创建一个新的序列，透明度为 1，位置为 x: 100, y: 100
  .position({ x: 200, y: 200 })
  .opacity(0).commit({ duration: 1000 }) // 将创建一个新的序列，透明度为 0，位置为 x: 200, y: 200，持续时间为 1 秒

注意：暂存的更改将在动画开始前提交，以确保应用最新的更改。

scale

缩放当前暂存序列。

  • scaleX: TransformDefinitions.Types["scaleX"] - 变换在 X 轴的缩放，使用负值可以反转缩放。参见 TransformDefinitions.Types
  • scaleY: TransformDefinitions.Types["scaleY"] - 变换在 Y 轴的缩放，使用负值可以反转缩放。参见 TransformDefinitions.Types
  • return: this

scaleX

在 X 轴方向缩放当前暂存序列。

scaleY

在 Y 轴方向缩放当前暂存序列。

scaleXY

同时在 X 和 Y 轴方向缩放当前暂存序列。

zoom

缩放当前暂存序列（推荐用于图像缩放）。

rotation

旋转当前暂存序列。

position

设置当前暂存序列的位置。

opacity

设置当前暂存序列的透明度。

fontColor

设置当前暂存序列的字体颜色。

动画过渡