跳过主要内容

补间到指定位置

补间到指定位置( 位置:[数字 | 标签], 变量:对象 ) : 补间动画

创建一个线性补间动画,将播放头逐步移动到特定时间或标签,然后停止。

参数

  • 位置:[数值 | 标签]

    时间线应该播放到的目标时间(以秒为单位)或标签。

  • 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()这样你可以定义起始点和结束点,从而立即准确地确定持续时间。

无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗