工具 / Tween
Tween<T> Class
补间(动画)(来自 in-between)是一个概念,允许你以平滑的方式更改对象的属性。 你只需告诉它哪些属性要更改,当补间结束运行时它们应该具有哪些最终值,以及这需要多长时间, 补间引擎将负责计算从起始点到结束点的值。
Type parameters
T | extends 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
T | extends 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
boolean | true-暂停;false-在补间。 |
---|
isPlaying
• isPlaying(): boolean
获取当前补间对象是否在补间过程。没结束补间的情况下,即使暂停,也会返回true。
Returns
boolean | true-在补间过程中;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
- 在补间开始之前执行,即在计算之前。
- 每个补间只能执行一次。当通过 repeat() 重复补间时,它将不会运行。
onStop
• onStop(callback?
): Tween
<T
>
当通过 stop() 显式停止补间时触发,补间对象作为第一个参数传入
Parameters
callback? (object : T ) => void | 要绑定的回调函数 default: undefined |
---|
Returns
Tween <T > | 当前补间对象,可链式调用 |
---|
Precautions
- 在正常完成时不触发。
- 在任何可能的链接补间都停止之后才触发。
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
boolean | true-如果当前更新之后尚未结束, false-当前更新之后补间结束 |
---|
yoyo
• yoyo(yoyo?
): Tween
<T
>
设置往复(悠悠球效果)
Parameters
yoyo? boolean | 是否启用yoyo default: false |
---|
Returns
Tween <T > | 当前补间对象,可链式调用 |
---|
这个功能只有在独自使用 repeat 时才有效果。
启用后,补间的行为将像悠悠球一样,会在起始值和结束值之间往复,而不是从头开始重复。