GSAP中文文档 - tween 属性 - 配置对象（vars）
配置对象（vars）
-
vars: Object
传递给构造函数的配置对象，其中包含您想要动画化的所有属性/值，以及任何可选的特殊属性，如 onComplete, onUpdate 等，例如 gsap.to(".class",{onComplete: func});
详细信息
| 属性 | 描述 | 默认值 |
|---|---|---|
| callbackScope | 用于所有回调（onStart, onUpdate, onComplete 等）的作用域。 | |
| data | 将任意数据分配给此属性（一个字符串，一个对象的引用，任何东西），它会附加到 tween 实例本身，以便您稍后可以像 yourTween.data 一样引用它。 | |
| delay | 动画应该开始之前的延迟时间（以秒为单位）。 | |
| duration | 动画的持续时间（以秒为单位）。 | 0.5 |
| ease | 控制动画期间的变化率，赋予它特定的感觉。例如，"elastic" 或 "strong.inOut"。ease 可以是一个字符串（最常见的）或是一个接受一个介于 0 和 1 之间的进度值并返回一个转换后的、标准化的值的函数。 | "power1.out" |
| id | 允许您（可选地）为您的 tween 实例分配一个唯一标识符，以便您稍后可以使用 gsap.getById() 找到它，并且它会在 GSDevTools 中以该 id 显示。 | |
| immediateRender | 通常，tween 会等到下一个更新周期（tick）才进行第一次渲染，除非您指定了延迟。设置 immediateRender: true 可以强制它在实例化时立即渲染。 | false 对于 to() tweens，true 对于 from() 和 fromTo() tweens 或任何具有 scrollTrigger 应用的 tweens |
| inherit | 通常，tweens 会继承其父时间线的 defaults 对象（如果定义了的话），但您可以通过设置 inherit: false 在每个 tween 基础上禁用此行为。 | |
| lazy | 当 tween 首次渲染并读取其起始值时，GSAP 会尝试将值的写入延迟到当前“tick”的最后，这可以提高性能，因为它避免了浏览器不喜欢的读写/读写布局破坏。要为特定 tween 禁用延迟渲染，请设置 lazy: false。 | true（零持续时间的 tweens 除外） |
| onComplete | 当动画完成时调用的函数。 | |
| onCompleteParams | 传递给 onComplete 函数的参数数组。 | |
| onRepeat | 每次动画进入新的迭代周期（重复）时调用的函数。这只在您设置非零 repeat 时发生。 | |
| onRepeatParams | 传递给 onRepeat 函数的参数数组。 | |
| onReverseComplete | 当动画从反向到达其开始时调用的函数（不包括重复）。 | |
| onReverseCompleteParams | 传递给 onReverseComplete 函数的参数数组。 | |
| onStart | 当动画开始时调用的函数（当其时间从 0 变为其他值时，如果 tween 多次重启，这种情况可能会发生多次）。 | |
| onStartParams | 传递给 onStart 函数的参数数组。 | |
| onUpdate | 每次动画更新时调用的函数（在移动其播放头的每个“tick”上）。 | |
| onUpdateParams | 传递给 onUpdate 函数的参数数组。 | |
| overwrite | 如果为 true，则所有相同目标的 tweens 将立即被杀死，无论它们影响哪些属性。如果为 "auto"，则当 tween 第一次渲染时，它会寻找任何活动的动画中的冲突（影响相同目标的相同属性）并仅杀死其他 tweens 的这些部分。 | false |
| paused | 如果为 true，则动画将在创建后立即暂停。 | false |
| repeat | 动画应该重复的次数。repeat: 1 将播放总共两次迭代。repeat: -1 将无限重复。 | 0 |
| repeatDelay | 重复之间的等待时间（以秒为单位）。 | 0 |
| repeatRefresh | 设置 repeatRefresh: true 会导致重复的 tween 在每次完整迭代（不包括 yoyo 的）时 invalidate() 并重新记录其起始/结束值。 | |
| reversed | 如果为 true，则动画将从其播放头反转开始，这意味着它将朝向其开始移动。 | |
| runBackwards | 如果为 true，则动画将反转其起始和结束值（这就是 from() tween 在内部做的），尽管 ease 不会被翻转。 | |
| stagger | 如果定义了多个目标，您可以通过设置像 stagger: 0.1（每个开始时间之间 0.1 秒）的值来轻松地错开开始时间。 | |
| startAt | 为任何属性定义起始值（即使它们不进行动画化）。 | |
| yoyo | 如果为 true，则每隔一次 repeat 迭代将反向运行，使 tween 看起来来回移动。 | false |
| yoyoEase | 允许您在 tween 的 yoyo 阶段改变 ease。 | false |
| keyframes | 要将目标动画化到各种状态，使用 keyframes - 一个 vars 对象数组，作为 to() tweens。 |