工具 / 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 时才有效果。
启用后,补间的行为将像悠悠球一样,会在起始值和结束值之间往复,而不是从头开始重复。