补间到指定位置
补间到指定位置( 位置:[数字 | 标签], 变量:对象 ) : 补间动画
创建一个线性补间动画,将播放头逐步移动到特定时间或标签,然后停止。
参数
位置:[数值 | 标签]
时间线应该播放到的目标时间(以秒为单位)或标签。
vars: 对象
(默认值 =
null
) - 一个可选的 vars 对象,会被传递给 Tween 实例。这允许你定义一个onComplete
,ease
,delay
,或者任何其他 Tween 的特殊属性。
返回值:Tween
Tween 实例,用于处理在指定时间与标签之间的时间线补间动画。
细节
创建一个线性补间动画,本质上是将播放头移动到特定时间或标签,然后停止。例如,要让时间线播放到 "myLabel2" 标签,只需执行以下操作:
tl.tweenTo("myLabel2");
如果你想要对补间进行高级控制,比如添加一个onComplete
或者更改ease
或者添加一个delay
,只需传入一个包含适当属性的vars
对象。
例如,要补间到时间线上的第 5 秒位置,然后调用名为myFunction
的函数,并传入一个引用该时间线的参数并使用一个strong
缓动函数,你可以这样做:
tl.tweenTo(5, {
onComplete: myFunction,
onCompleteParams: [tl],
ease: "strong",
});
请记住,此方法只是创建了一个暂停时间线,然后对其time()
进行补间的 Tween 实例。因此,如果需要的话,您可以保存对该补间的引用,并且可以随时kill()
在任何时候取消它。
另请注意,tweenTo()
不会非影响时间线的反向状态。因此,如果你的时间线方向正常(未反转),并且你补间到一个早于当前时间的时间/标签,时间线看起来会倒着播放,但 reversed 状态不会变为 true。
另请注意,tweenTo()
在补间其time()
前立即暂停时间线,有在补间完成后不会自动恢复播放。如果你需要恢复播放,可以始终使用 onComplete 来调用时间线的resume()
方法快速转换任何坐标。
如果你计划依次执行多个播放头补间动画,通常最好使用tweenFromTo()
这样你可以定义起始点和结束点,从而立即准确地确定持续时间。