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 时才有效果。

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