Skip to content
Tween<T>

工具 / Tween

Tween<T> Class

补间(动画)(来自 in-between)是一个概念,允许你以平滑的方式更改对象的属性。 你只需告诉它哪些属性要更改,当补间结束运行时它们应该具有哪些最终值,以及这需要多长时间, 补间引擎将负责计算从起始点到结束点的值。

Type parameters

Textends TweenUnknownProps

Table of contents

Methods

chain(...tweens: Tween<any>[]): Tween<T>
将(多个)补间对象链接到当前补间对象。在当前补间结束的时候立即启动链接的补间
delay(amount?: number): Tween<T>
延迟启动
duration(d?: number): Tween<T>
设置完成补间需要的时间(周期)
easing([easing](mw.Tween.md#easing)Function?): Tween<T>
设置缓动函数
end(): Tween<T>
将当前补间置为目标状态
getID(): number
获取当前补间对象的ID
group([group](mw.Tween.md#group)?): Tween<T>
设置当前补间对象的分组
interpolation([interpolation](mw.Tween.md#interpolation)Function?): Tween<T>
设置插值函数
isPaused(): boolean
获取当前补间对象是否为暂停状态。
isPlaying(): boolean
获取当前补间对象是否在补间过程。没结束补间的情况下,即使暂停,也会返回true。
onComplete(callback?: (object: T) => void): Tween<T>
当补间正常完成(即不停止)时触发,补间对象作为第一个参数传入
onRepeat(callback?: (object: T) => void): Tween<T>
每次补间完成并即将开始下一次重复时触发,补间对象作为第一个参数传入
onStart(callback?: (object: T) => void): Tween<T>
在补间开始之前触发,补间对象作为第一个参数传入
onStop(callback?: (object: T) => void): Tween<T>
当通过 stop() 显式停止补间时触发,补间对象作为第一个参数传入
onUpdate(callback?: (object: T, elapsed: number) => void): Tween<T>
每次补间更新时触发,补间对象作为第一个参数传入
pause(time?: number): Tween<T>
暂停补间,可以指定暂停生效时间,默认为当前时间
repeat(times?: number): Tween<T>
设置重复次数, 补间的总次数将是重复参数加上一个初始补间
repeatDelay(amount?: number): Tween<T>
设置重复补间时的延迟启动时间
resume(time?: number): Tween<T>
恢复补间,可以指定恢复生效时间,默认为当前时间
start(time?: number): Tween<T>
启动补间,可以指定启动生效时间,默认为当前时间
stop(): Tween<T>
停止补间,停止一个从未开始或已经停止的补间没有任何效果。 没有错误被抛出
stopChainedTweens(): Tween<T>
停止所有链接到当前补间的补间对象
to(properties: TweenUnknownProps, duration?: number): Tween<T>
设置补间的目标状态和完成补间需要的时间
update(time?: number, autoStart?: boolean): boolean
更新当前的补间。一般来说会由所属的补间组自动调用,无需手动调用。
yoyo([yoyo](mw.Tween.md#yoyo)?): Tween<T>
设置往复(悠悠球效果)

补间构造函数

Type parameters

Textends TweenUnknownProps

Parameters

obj T要创建补间的对象类型
group? false TweenGroup要创建的补间对象的分组 default: mainGroup

Methods

chain

chain(...tweens): Tween<T>

将(多个)补间对象链接到当前补间对象。在当前补间结束的时候立即启动链接的补间

Parameters

...tweens Tween<any>[]要链接的补间对象(数组)

Returns

Tween<T>当前补间对象,可链式调用
使用示例: 示例
ts
// A结束后启动B
tweenA.chain(tweenB)

// A-B循环
tweenA.chain(tweenB)
tweenB.chain(tweenA)

// A结束后同时启动B,C
tweenA.chain(tweenB, tweenC)
// A结束后启动B
tweenA.chain(tweenB)

// A-B循环
tweenA.chain(tweenB)
tweenB.chain(tweenA)

// A结束后同时启动B,C
tweenA.chain(tweenB, tweenC)

delay

delay(amount?): Tween<T>

延迟启动

Parameters

amount? number延迟时间,单位:ms。 default: 0
range: [0, +∞] type: 浮点数

Returns

Tween<T>当前补间对象,可链式调用

duration

duration(d?): Tween<T>

设置完成补间需要的时间(周期)

Parameters

d? number完成补间需要的时间,单位:ms。 default: 1000
range: [0, +∞] type: 浮点数

Returns

Tween<T>当前补间对象,可链式调用

easing

easing(easingFunction?): Tween<T>

设置缓动函数

Parameters

easingFunction? TweenEasingFunction缓动函数 default: Easing.Linear.None

Returns

Tween<T>当前补间对象,可链式调用

end

end(): Tween<T>

将当前补间置为目标状态

Returns

Tween<T>当前补间对象,可链式调用

getID

getID(): number

获取当前补间对象的ID

Returns

number当前补间对象的ID

group

group(group?): Tween<T>

设置当前补间对象的分组

Parameters

group? TweenGroup新的分组 default: mainGroup

Returns

Tween<T>当前补间对象,可链式调用

interpolation

interpolation(interpolationFunction?): Tween<T>

设置插值函数

Parameters

interpolationFunction? TweenInterpolationFunction插值函数 default: Interpolation.Linear

Returns

Tween<T>当前补间对象,可链式调用

isPaused

isPaused(): boolean

获取当前补间对象是否为暂停状态。

Returns

booleantrue-暂停;false-在补间。

isPlaying

isPlaying(): boolean

获取当前补间对象是否在补间过程。没结束补间的情况下,即使暂停,也会返回true。

Returns

booleantrue-在补间过程中;false-不在补间过程,未开始或已结束。

onComplete

onComplete(callback?): Tween<T>

当补间正常完成(即不停止)时触发,补间对象作为第一个参数传入

Parameters

callback? (object: T) => void要绑定的回调函数 default: undefined

Returns

Tween<T>当前补间对象,可链式调用

onRepeat

onRepeat(callback?): Tween<T>

每次补间完成并即将开始下一次重复时触发,补间对象作为第一个参数传入

Parameters

callback? (object: T) => void要绑定的回调函数 default: undefined

Returns

Tween<T>当前补间对象,可链式调用

onStart

onStart(callback?): Tween<T>

在补间开始之前触发,补间对象作为第一个参数传入

Parameters

callback? (object: T) => void要绑定的回调函数 default: undefined

Returns

Tween<T>当前补间对象,可链式调用

Precautions

  1. 在补间开始之前执行,即在计算之前。
  2. 每个补间只能执行一次。当通过 repeat() 重复补间时,它将不会运行。

onStop

onStop(callback?): Tween<T>

当通过 stop() 显式停止补间时触发,补间对象作为第一个参数传入

Parameters

callback? (object: T) => void要绑定的回调函数 default: undefined

Returns

Tween<T>当前补间对象,可链式调用

Precautions

  1. 在正常完成时不触发。
  2. 在任何可能的链接补间都停止之后才触发。

onUpdate

onUpdate(callback?): Tween<T>

每次补间更新时触发,补间对象作为第一个参数传入

Parameters

callback? (object: T, elapsed: number) => void要绑定的回调函数 default: undefined

Returns

Tween<T>当前补间对象,可链式调用

Precautions

回调触发时,属性已更新完成。


pause

pause(time?): Tween<T>

暂停补间,可以指定暂停生效时间,默认为当前时间

Parameters

time? number暂停生效时间 default: 当前时间
range: [0, +∞] type: 浮点数

Returns

Tween<T>当前补间对象,可链式调用

Precautions

接受一个参数 time。如果你使用它,那么暂停不会立即生效,直到特定时刻,否则会尽快暂停(i.e 即在下次调用 update)


repeat

repeat(times?): Tween<T>

设置重复次数, 补间的总次数将是重复参数加上一个初始补间

Parameters

times? number重复次数 default: 0
range: [0, +∞] type: 浮点数

Returns

Tween<T>当前补间对象,可链式调用

Precautions

会重置当前的重复次数

使用示例: 示例
ts
tween.repeat(10) // 循环10次
tween.repeat(Infinity) // 无限循环
tween.repeat(10) // 循环10次
tween.repeat(Infinity) // 无限循环

repeatDelay

repeatDelay(amount?): Tween<T>

设置重复补间时的延迟启动时间

Parameters

amount? number延迟时间,单位:ms。 default: undefined type: 浮点数 range: [0, +∞]

Returns

Tween<T>当前补间对象,可链式调用

Range

: [0, +∞]


resume

resume(time?): Tween<T>

恢复补间,可以指定恢复生效时间,默认为当前时间

Parameters

time? number恢复生效时间 default: 当前时间
range: [0, +∞] type: 浮点数

Returns

Tween<T>当前补间对象,可链式调用

Precautions

接受一个参数 time。如果你使用它,那么恢复不会立即生效,直到特定时刻,否则会尽快恢复(i.e 即在下次调用 update)


start

start(time?): Tween<T>

启动补间,可以指定启动生效时间,默认为当前时间

Parameters

time? number启动生效时间 default: 当前时间
range: [0, +∞] type: 浮点数

Returns

Tween<T>当前补间对象,可链式调用

Precautions

接受一个参数 time。如果你使用它,那么补间不会立即开始,直到特定时刻,否则会尽快启动(i.e 即在下次调用 update)


stop

stop(): Tween<T>

停止补间,停止一个从未开始或已经停止的补间没有任何效果。 没有错误被抛出

Returns

Tween<T>当前补间对象,可链式调用

stopChainedTweens

stopChainedTweens(): Tween<T>

停止所有链接到当前补间的补间对象

Returns

Tween<T>当前补间对象,可链式调用

to

to(properties, duration?): Tween<T>

设置补间的目标状态和完成补间需要的时间

Parameters

properties TweenUnknownProps目标状态,可以是一个数组: 例如 to([0,100,200], time)
duration? number完成补间需要的时间,单位:ms。 default: 1000
range: [0, +∞] type: 浮点数

Returns

Tween<T>当前补间对象,可链式调用

update

update(time?, autoStart?): boolean

更新当前的补间。一般来说会由所属的补间组自动调用,无需手动调用。

Parameters

time? number要绑定的回调函数 default: 当前时间
range: [0, +∞] type: 浮点数
autoStart? boolean是否自动开始 default: true

Returns

booleantrue-如果当前更新之后尚未结束, false-当前更新之后补间结束

yoyo

yoyo(yoyo?): Tween<T>

设置往复(悠悠球效果)

Parameters

yoyo? boolean是否启用yoyo default: false

Returns

Tween<T>当前补间对象,可链式调用

这个功能只有在独自使用 repeat 时才有效果。

启用后,补间的行为将像悠悠球一样,会在起始值和结束值之间往复,而不是从头开始重复。