gsap.quickSetter()

返回值：函数​

细节​

如果你发现自己多次调用gsap.set()在同一个对象（或一组对象）上多次执行，比如在“mousemove”事件中，你可以提升 50% - 250% 的性能通过创建一个 quickSetter 函数并使用它来替代gsap.set()。可以把 quickSetter 想象成一个专为某个目标（或一组目标）的特定属性优化的函数，它能够直接将数据传送给该属性并中的一些便捷任务调用中的诸如：gsap.set()单位转换和单位自动追加

• 自动进行单位转换和单位追加（不过你可以为 quickSetter 指定一个单位，这个单位会始终追加到你传入的数字后面）
• 相对值
• 基于函数的值
• "random()"解析
• 针对某些属性在浏览器中的不一致问题做出了特殊处理，例如 SVG 元素上的 transformOrigin 属性（所以不建议为 transformOrigin 创建 quickSetter）
• 属性名别名转换（“x” 对变换有效，但 “translateX” 无效）

与实用方法结合使用以生成功能强大的函数！​

因为它接受单个值，所以你可以将 quickSetter 放在pipe()的末尾，在执行有用操作的其他实用函数之后，这些函数会对传入的数值进行处理，例如限制范围或者对齐或者以某种方式清理数值。例如：

let xSetter = 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.quickSetter("#id", "x", "px") //apply it to the #id element's x property and append a "px" unit
  );

//then later...
xSetter(150) //sets the #el's transform to translateX(100px) (clamped to 100)
xSetter(3)   //sets it to 5px (snapped)
...

鼠标跟随示例​

如果你在进行动画，请使用 gsap.quickTo()​

gsap.quickSetter() 主要用于立即设置值，但如果你更倾向于动画过渡到新值而不是立刻跳转，请查看gsap.quickTo()方法。下面是一个使用它的鼠标跟随示例：

多值技巧​

你可以获得 CSSPlugin 的好处（例如相对值、"random()"解析等），并通过设置 quickSetter 的多个属性应用于 DOM 元素的方法是将 quickSetter 的property设置为"css"然后将值作为对象列表，例如：

var boxSet = gsap.quickSetter("#box", "css");
boxSet({ x: "+=100", y: "random(-100, 100)" }); //works!

这种技术同样适用于属性（使用 "attr" 代替）：

var circleSet = gsap.quickSetter("#circle", "attr");
circleSet({ cx: "+=100", cy: "random(-100, 100)" }); //works!

但这带来的性能提升不如使用像gsap.quickSetter("#box", "x", "px")这样指定属性那么显著。尽管如此，它仍然比标准的 gsap.set() 更快。