细节​

这个vars传递给构造函数的对象，其中包含您想要动画的所有属性/值，以及任何可选的特殊属性诸如onComplete, onUpdate等（如下所列）

属性

描述

• callbackScope

  所有回调函数（onStart、onUpdate、onComplete 等）使用的执行上下文。

• 数据

  将任意数据分配给此属性（字符串、对象引用等），它会被附加到 Tween 实例本身上，这样之后就可以像yourTween.data.

• delay

  动画开始前的延迟时间（以秒为单位）。

• 持续时间

  动画的持续时间（以秒为单位）。默认值:0.5.

• ease

  控制动画过程中的变化速率，使其具有特定的感觉。例如，"elastic"或者"strong.inOut"。有关示例，请参见本页的缓动可视化工具查看所有选项的完整列表。ease可以是一个字符串（最常见），或者是一个接受 0 到 1 之间进度值并返回转换后的标准化值的函数。默认值:"power1.out".

• id

  允许你（可选）为你的 Tween 实例分配一个唯一的标识符，以便后续可以通过gsap.getById()来查找它，并且它会在GSDevTools中显示这个 ID。

• immediateRender

  通常，一个 Tween 会等到下一个 tick（更新周期）才首次渲染，除非你指定了 delay。设置immediateRender: true强制它在实例化时立即渲染。默认值:false为了to()Tween，true为了from()和fromTo()多个 Tween 或者任何拥有scrollTrigger应用效果的对象.

• inherit

  通常，Tween 会从父 Timeline 的defaults对象继承（如果定义了的话），但你可以通过设置inherit: false.

• lazy

  当 Tween 第一次渲染并读取其起始值时，GSAP 会尽量将写入值的操作推迟到当前“tick”结束，这可以提升性能，因为它避免了浏览器不喜欢的 read/write/read/write 的布局抖动。要禁用某个 Tween 的懒惰渲染，请设置lazy: false。大多数情况下，无需设置lazy。如需了解更多，请观看此视频. 默认值:true（零持续时间的 Tween 除外）.

• onComplete

  动画完成后调用的函数。

• onCompleteParams

  传递给 onComplete 函数的参数数组。例如，gsap.to(".class", {x:100, onComplete:myFunction, onCompleteParams:["param1", "param2"]});.

• onRepeat

  每次动画进入一个新的迭代周期（重复）时调用的函数。显然，只有当你设置了非零的repeat.

• onRepeatParams

  传递给 onRepeat 函数的参数数组。

• onReverseComplete

  当动画从反向方向回到起点时调用的函数（不包括重复）。

• onReverseCompleteParams

  传递给 onReverseComplete 函数的参数数组。

• onStart

  动画开始时调用的函数（当它的播放时间从 0 变为其他值时触发，如果你多次重启 Tween，它可以被多次触发）。

• onStartParams

  传递给onStart函数的参数数组。

• onUpdate

  每次动画更新时（即每次推动播放头的“tick”）调用的函数。

• onUpdateParams

  传递给onUpdate函数的参数数组。

• overwrite（覆盖）

  如果true，所有相同目标的补间动画将立即被终止，无论它们影响哪些属性。如果设置为"auto"，当补间动画首次渲染时，它会查找当前动画中可能存在的冲突（即对相同目标的相同属性进行动画处理），并终止这些冲突部分的其他补间动画。非冲突部分保持不变。如果设置为false，则不使用任何覆盖策略。默认值:false.

• paused

  如果true，动画将在创建后立即暂停。默认值:false.

• repeat

  动画应重复播放的次数。因此设置为repeat: 1将总共播放两次迭代。默认值:0. repeat: -1将无限重复。

• repeatDelay

  重复之间等待的时间（以秒为单位）。默认值:0.

• repeatRefresh（重复刷新）

  设置repeatRefresh: true会使重复补间动画在invalidate()每次完整迭代时（不含yoyo效果）重新记录其起始和结束值。这对于你使用动态值（相对、随机或基于函数的值）时非常有用。例如，x: "random(-100, 100)"在每次重复时都会获得一个新的随机x值。duration, delay，以及staggerdo非refresh（刷新）。

• reversed

  如果true，动画将以播放头反向开始，意味着它将朝向起点方向移动。由于播放头无论如何都是从0时刻开始的，一个反向的补间动画会因为播放头无法向后移动超过起点而看起来初始处于暂停状态。

• runBackwards（反向运行）

  如果true，动画将反转其起始和结束值（这正是一个from()补间动画内部所做的事情），但缓动函数不会翻转。换句话说，你可以将一个to()补间动画转换成一个from()通过设置runBackwards: true.

• stagger（交错）

  如果定义了多个目标，你可以轻松地stagger（交错）每个目标的开始时间，比如stagger: 0.1的值（每个开始时间之间间隔0.1秒）。或者你可以使用stagger对象来实现更复杂的交错效果。更多信息请参见stagger文档.

• startAt（起始值）

  定义任意属性的起始值（即使这些属性没有被动画化）。例如，startAt: {x: -100, opacity: 0}

• 哟哟（yoyo）

  如果true，每隔一次repeat迭代将反向运行，使得补间动画看起来像是来回运动。这并不会影响到reversed属性。例如，如果设置为repeat设置为2和yoyo设置为false，看起来就像：起点 - 1 - 2 - 3 - 1 - 2 - 3 - 1 - 2 - 3 - 终点。但如果设置为yoyo设置为true，看起来就像：起点 - 1 - 2 - 3 - 3 - 2 - 1 - 1 - 2 - 3 - 终点。默认值:false.

• yoyoEase（来回缓动）

  允许你在补间动画的yoyo回放阶段修改缓动方式。可以将其设置为特定的缓动函数如"power2.in"或者设置为true来简单地反转补间动画原本的ease缓动曲线。注意：如果你定义了任何yoyo: trueGSAP足够智能地自动设置yoyoEase，这样你就无需编写太多代码。默认值:false.

• keyframes（关键帧）

  要将目标动画过渡到多个状态，请使用keyframes- 一个由vars对象组成的数组，每一个都作为一个to()补间动画。例如，keyframes: [{x:100, duration:1}, {y:100, duration:0.5}]。所有的关键帧将会完美地连续播放，但你可以定义一个delay值来在每一步之间添加间隔（负延迟将创建重叠）。Keyframes只能用于to()补间动画。