GSAP/zh-cn/几种常用方法.md

gsap.to

使用示例

gsap.to(".box.red", { x: 200, duration: 2 });

参数

参数	描述
targets	css选择器，用于指定是哪个元素，可以是元素列表
vars	包含要为您想要动画的所有属性/值的对象,以及任何特殊属性，如ease, duration, delay，或onComplete(下面列出)。

可以指定的参数

将这些添加到vars对象中，以赋予动画特殊的能力

参数	描述
callbackScope	用于所有回调(onStart, onUpdate, onComplete等)的范围。
data	将任意数据赋给这个属性(一个字符串，一个对象的引用，等等)，它就会被附加到补间实例本身，这样你以后就可以像yourTween.data那样引用它。
delay	动画开始前的延迟量(单位:秒)。
duration	动画的持续时间(秒)。默认值:0.5。
ease	控制在动画期间的变化速率，给它一个特定的感觉。例如，“elastic”或“strong.inOut”。请参阅Ease Visualizer以获得所有选项的列表。ease可以是String(最常见)或接受0到1之间的进度值并返回转换后的类似规范化值的函数。默认值:“power1.out”。
id	允许你(可选)分配一个唯一的标识符给你的补间实例，这样你以后可以用gsap.getById()找到它，它将显示在GSDevTools的id。
immediateRender	通常，补间会等待第一次呈现，直到下一个滴答(更新周期)，除非你指定了一个延迟。设置immediateRender: true强制它在实例化时立即呈现。默认值:false for to() tweens, true for from()和fromTo() tweens或任何应用scrollTrigger的东西。
inherit	通常补间会继承父时间轴的默认对象(如果定义了默认对象)，但是你可以通过设置inherit: false来禁用它。
lazy	当TWEEN渲染第一次并读取其起始值时，GSAP将尝试延迟值，直到当前的“勾选”的最终可以提高性能，因为它避免了读/写/读/写布局抖动 浏览器不喜欢。 要为特定的Tween禁用懒惰渲染，请设置懒惰：假。 在大多数情况下，没有必要设置懒惰。 要了解更多信息，请观看此视频。 默认值：true（零持续时间修补除外）。
onComplete	当动画完成时要调用的函数。