gsap.to()

返回值：Tween​

最常见的动画类型是to()补间动画（tween），因为它允许你定义目标值（而且大多数人习惯于通过动画某些值来思考）：设置为GSAP 会自动计算当前值（你不需要定义起始值，不过你可以在一个

// rotate and move elements with a class of "box"
// ("x" is a shortcut for a translateX() transform) over the course of 1 second.
gsap.to(".box", { rotation: 27, x: 100, duration: 1 });

GSAP figures out the current values automatically (you don't need to define starting values, though you can in a fromTo()补间动画中定义））。由于 GSAP 可以对任何对象的属性进行动画处理，任意属性属于任意对象，你并不非并不仅限于 CSS 属性或 DOM 对象。尽情发挥吧。你可能会惊讶于 GSAP 能对这么多东西进行动画处理，并且“开箱即用”。

如需稍后控制 Tween 实例，请将其赋值给一个变量（GSAP 很方便地是面向对象的）：

let tween = gsap.to(".class", {rotation: 360, duration: 5, ease: "elastic"});

//now we can control it!
tween.pause();
tween.seek(2);
tween.progress(0.5);
tween.play();
...

如果只是触发动画并让它运行，无需使用变量。Tween 默认立即播放（虽然你可以设置一个delay或者paused值），并且当它们完成时会自动销毁自己。可以随意调用gsap.to()，无需担心清理工作。

其他类型的动画：

• from()- 你定义了起始值，GSAP使用当前值作为起始值。“from”，GSAP 会使用当前值作为目标值（就像一个反向播放的补间动画）
• fromTo()- 你定义了起始和结束值。

参数​

1. targets- 你想动画化其属性的对象（们）。这可以是类似".class", "#id"等的选择器文本（GSAP 内部使用document.querySelectorAll()内部使用），或者可以直接引用元素、通用对象，甚至是对象数组。
2. vars- 一个包含你想要动画化的所有属性/值的对象，以及一些特殊属性如ease, duration, delay，或者onComplete（如下所列）。

特殊属性​

向你的vars对象中添加以下任一项，以赋予你的动画特殊功能：

属性

描述

• 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"]});

• onInterrupt

  当动画被中断时调用的函数，也就是说，如果/当tween在其完成之前被终止。这可能是因为调用了它的kill()方法，或者是由于覆盖所致。

• onInterruptParams

  要传递给onInterrupt函数的参数数组。例如，gsap.to(".class", {x:100, onInterrupt:myFunction, onInterruptParams:["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将总共播放两次迭代。使用-1表示无限重复。默认值:0

• 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()补间动画。

插件​

插件为GSAP核心增加了额外功能。一些插件使你更容易与渲染库如PIXI.js或EaselJS协作，而另一些插件则增加了诸如形变SVG形状、添加拖放功能等超能力。这使得GSAP核心能够保持相对小巧，并且只在你需要的时候才添加功能。查看完整插件列表请点击这里.

基于函数的值​

通过为任意值使用函数可以获得极度动态的动画效果，在每个目标第一次渲染时都会调用该函数一次并且函数返回的值将被用作该值。这非常适合应用条件逻辑或随机化处理（虽然GSAP内置也有随机化功能……向下滚动查看）。

gsap.to(".class", {
  x: 100, //normal value
  y: function(index, target, targets) { //function-based value
    return index \* 50;
  },
  duration: 1
});

该函数接收三个参数：

1. index（索引） - 目标在数组中的索引。例如，如果有3个<div>具有类".box"的元素，并且你gsap.to(".box", ...)使用该函数0第一个调用的索引是0，1然后是1，2.
2. target（目标） - 目标本身（在这个例子中是<div>元素）
3. targets（所有目标） - 目标数组（与传入的tween.targets())

随机值​

将随机值定义为字符串格式如"random(-100, 100)"范围，或像这样"random([red, blue, green])"对于数组，GSAP将在每个目标上插入一个随机值相应地！这让高级随机化效果变得简单。你甚至可以让随机数四舍五入到任意增量的最接近值！例如：

gsap.to(".class", {
  // chooses a random number between -100 and 100
  // for each target, rounding to the closest 5!
  x: "random(-100, 100, 5)",
});

或者使用类似数组的值，GSAP将从中随机选择一个：

gsap.to(".class", {
  x: "random([0, 100, 200, 500])", // randomly selects one of the values (0, 100, 200, or 500)
});

还有一个gsap.utils.random()函数，你也可以直接使用它。

相对值​

使用"+="或者"-="前缀表示一个相对值。例如，gsap.to(".class", {x:"-=20"});将动画化为比x20像素更少的值，这个值是补间动画开始时的原始值。{x:"+=20"}将会变成添加20。为了以相对的方式使用变量，只需加上"+="或者"-="前缀，如{x: "+=" + yourVariable}.

Staggers（交错动画）​

如果定义了多个目标，你可以轻松地stagger（交错）（偏移）每个目标的开始时间，通过设置类似stagger: 0.1（每个开始时间之间间隔 0.1 秒）。或者你可以通过使用 stagger 对象实现更高级的时间错位效果。更多信息请参见stagger文档.

序列编排​

对于基础的顺序控制，你可以在每个补间动画上使用delay如gsap.to(".class", {delay: 0.5,duration: 1, x: 100})的回调函数，但我们强烈推荐这样做。否则，使用推荐使用Timeline几乎所有稍微复杂一点的时间排序任务都推荐使用这种方式，因为它提供了更大的灵活性，尤其是在你尝试调整时间的时候。它允许你逐个追加动画，然后整体控制整个动画序列。甚至可以任意地让动画重叠、嵌套时间轴到任意深度，还有很多其他功能。

时间线也有方便的方法，因此你可以非常轻松地将它们串联在一起并构建复杂的序列：to(), from()，以及fromTo()如果你发现自己反复对同一个目标进行动画处理，那么一定要看看这个功能，它可以让你的代码更加简洁。它还让你可以轻松地从CSS动画移植动画效果。

let tl = gsap.timeline(); //create the timeline
tl.to(".class1", { x: 100 }) //start sequencing
  .to(".class2", { y: 100, ease: "elastic" })
  .to(".class3", { rotation: 180 });

关键帧​

了解更多关于关键帧的内容关键帧注意事项 / 小贴士

你可以通过更改默认缓动函数

回调函数​

回调是在某个动画或时间轴发生特定事件后调用的函数，比如启动、完成、重复、反向完成或更新时。它们对于调试、保持项目不同部分的同步以及其他许多用途都非常有用。