从某一状态补间到另一状态

从某一状态补间到另一状态( 起始位置:[数字 | 标签], 结束位置:[数字 | 标签], 变量:对象 ) : 补间动画

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

参数

起始位置：[数值 | 标签]
时间线应该开始播放的起始时间（以秒为单位）或标签。
结束位置：[数值 | 标签]
时间线应该播放到的目标时间（以秒为单位）或标签。
vars: 对象
(默认值 =null) - 一个可选的 vars 对象，会被传递给 Tween 实例。这允许你定义一个onComplete, ease, delay，或者任何其他 Tween 的特殊属性。

返回值：Tween

Tween 实例，用于处理在指定时间与标签之间的时间线补间动画。

细节

创建一个线性补间动画，基本上是从特定的时间或标签向前移动播放头到另一个时间或标签，然后停止。如果你打算依次排列多个播放头补间动画，tweenFromTo()比tweenTo()更好，因为它允许立即确定持续时间，确保附加到序列中的后续补间动画能被正确放置。例如，要让时间线从标签 "myLabel1" 播放到 "myLabel2"，然后从 "myLabel2" 返回开头（时间为 0），只需执行以下操作：

var master = gsap.timeline();
master.add(tl.tweenFromTo("myLabel1", "myLabel2"));
master.add(tl.tweenFromTo("myLabel2", 0));

如果你想要对补间进行高级控制，比如添加一个onComplete或者更改ease或者添加一个delay，只需传入一个带有适当属性的 vars 对象即可。

例如，要从时间线的起点 (0) 补间到 5 秒的位置，然后调用名为myFunction的函数，并传入一个引用该时间线的参数并使用一个strong缓动函数，你可以这样做：

tl.tweenFromTo(0, 5, {
  onComplete: myFunction,
  onCompleteParams: [tl],
  ease: "strong",
});

请记住，此方法只是创建了一个补间动画来控制时间线的time()属性。因此，如果你想的话，可以存储对该补间动画的引用，并且你可以kill()在任何时候取消它。

另请注意，tweenFromTo()不会非影响时间线的reversed属性。因此，如果你的时间线是正常方向播放（非反转）并且你补间到一个早于当前时间的时间点或标签，看起来它会倒着播放，但是reversed属性不会自动更改为 true。

另请注意，tweenFromTo()在补间其time()，并且在补间完成后它不会自动恢复播放。如果你需要恢复播放，总是可以通过 onComplete 回调来调用resume()方法快速转换任何坐标。

与 GSAP 中所有 from 类型的方法一样，immediateRender设置为true默认情况下是立即跳转到“from”时间/标签，除非你设置immediateRender: false（比如.tweenFromTo(1, 5, {immediateRender: false})）。

通知

消息

从某一状态补间到另一状态