Tween

// This is a Tween
gsap.to(".box", { rotation: 27, x: 100, duration: 1 });

Tween 是执行所有动画工作的核心 - 就把它想象成一个高性能属性设置器高性能的属性设置器。你提供目标对象（你想动画化的对象）、一个持续时间，以及你想要动画化的任意属性；当它的播放头移动到新的位置时，它会自动计算在该点这些属性值应该是什么，并相应地应用它们。

创建 Tween 的方法（所有这些方法都会返回一个 Tween 实例）：

• gsap.to()
• gsap.from()
• gsap.fromTo()

对于简单的动画，上面的方法就是你需要的一切！例如：

//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 可以动画化任何对象的任何属性，你并不局限于 CSS 属性或 DOM 对象。你可以尽情发挥。你可能会惊讶于用 GSAP 能够动画化的对象数量之多，并且“开箱即用”。

可以使用delay特殊属性，但时间轴（Timeline）它让序列和复杂的编排变得更加简单。Timeline 就像是多个 Tween 实例（或者其他的时间轴（Timeline））的时间容器，在其中你可以按时间定位它们并整体控制它们。请见Timeline 文档了解详情。

如需稍后控制 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();

参数

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

特殊属性​

属性

描述

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

插件​

插件为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", {
x:"random(-100, 100, 5)" //chooses a random number between -100 and 100 for each target, rounding to the closest 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。

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});

关键帧​

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

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

注意事项 / 小提示​

• 随时使用杀死某个特定对象的所有补间动画gsap.defaults({ease: ...})你也可以像这样使用选择器文本"power1.out".
• 你可以杀死所有gsap.killTweensOf(yourObject)发送给特定函数的sgsap.killTweensOf("#someID");
• （value:Number）：[Number | self]delayedCall获取或设置动画的初始延迟，该延迟是动画开始前的秒数。gsap.killTweensOf(myFunction)

方法​

属性​