gsap.quickTo()
返回值：函数
细节
如果你发现自己多次调用gsap.to()同一个目标上的相同数值属性，例如在 "mousemove" 事件中，你可以提升性能通过创建一个 quickTo() 函数来实现。可以将其想作是一个绑定到特定数值属性的优化函数，它直接将新数值传递给该属性并跳过quickTo()常规中的一些便捷任务调用中的诸如：gsap.to()单位转换和单位自动追加
- Unit conversion and auto-appending of units
- 相对值
- 基于函数的值
"random()"解析- 插件解析 - 仅适用于目标的直接属性或与 CSS 相关的属性。例如，你不能使用 attr: 值或 morphSVG 等。
- 属性名别名转换（“x” 对变换有效，但 “translateX” 无效）
每次向函数传递一个新数值时，它基本上会重新启动动画，将其重定向到新的数值。它返回（复用的）Tween 实例。
可选的第三个参数是 tweenvars对象，在这里你可以指定诸如duration, ease，等等。
示例
let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });
document.querySelector("#container").addEventListener("mousemove", (e) => {
xTo(e.pageX);
yTo(e.pageY);
});
与实用方法结合使用以生成功能强大的函数！
因为它接受单个值，所以你可以将 quickTo 放置在pipe()的末尾，在执行有用操作的其他实用函数之后，这些函数会对传入的数值进行处理，例如限制范围或者对齐或者以某种方式清理数值。例如：
let xTo = gsap.utils.pipe(
gsap.utils.clamp(0, 100), // make sure the number is between 0 and 100
gsap.utils.snap(5), // snap to the closest increment of 5
gsap.quickTo("#id", "x", {duration: 0.8, ease: "power3"}) // apply it to the #id element's x property, have it take 0.8 seconds each time it's updated, and use a "power3" ease
);
//then later...
xTo(150) // animates the #el's transform to translateX(100px) (clamped to 100)
xTo(3) // animates it to 5px (snapped)
...
鼠标跟随示例
加载中...
可选地定义起始值
默认情况下，它将从当前的数值开始在 tween 内在其当前进度处（实际上不会检查目标当前的数值...这里的目的是最大化性能）。但你可以通过将一个数值型起始值作为第二个参数传入来覆盖这个行为：
let xTo = gsap.quickTo("#id", "x", { duration: 0.8 });
xTo(100); // animates to 100 from current value inside the tween at its current progress
xTo(100, 500); // animates to 100 from 500
访问 tween
如果你需要访问 tween，比如要pause()它，那么生成的函数具有一个.tweenscrollTrigger 属性获取与其关联的 ScrollTrigger 实例：
let xTo = gsap.quickTo("#id", "x", { duration: 0.8 });
xTo(100); // animate to 100
xTo.tween.pause(); // pause the tween!
它是一个常规的Tween实例，因此你可以使用其所有方法和属性，除了delay().
