GSAP

npm install gsap

import { gsap } from "gsap"

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

// And this is a Timeline, containing three sequenced tweens
let tl = gsap.timeline();
tl.to("#green", {duration: 1, x: 786})
  .to("#blue", {duration: 2, x: 786})
  .to("#orange", {duration: 1, x: 786})

这个gsap对象是访问GSAP大部分功能的入口。这只是一个通用对象，具有各种可创建和控制动画的方法和属性。补间动画（Tween）和时间轴（Timeline），这是两个最重要的概念。

要充分利用GSAP，你必须了解Tween和Timeline的概念：

什么是补间动画（Tween）？​

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

可以使用delay特殊属性来进行基本的序列编排，但Timelines（时间轴）使得顺序播放和复杂编排更加容易。

什么是时间轴（Timeline）？​

A 时间轴是一种补间动画的容器。它是一种终极的序列工具，可以让你将动画放置在你想要的时间位置上，并通过如下的方法轻松控制整个序列：pause()（暂停）, play()（播放）, progress()（进度）, reverse()（反向）, timeScale()（时间缩放），等等。

可以创建任意数量的时间轴。甚至可以嵌套时间轴这对模块化你的动画代码非常有帮助！每个动画（补间动画和时间轴）都会被放置在其父级时间轴中（默认为globalTimeline）。移动时间轴的播放头会向下传递到其子项，从而保持播放头对齐。时间轴纯粹是为了分组内容和协调时间/播放头——它从不实际设置目标对象上的属性（这部分由补间动画完成）。

创建时间轴的方法：​

• gsap.timeline()

GSAP的API允许你实时控制几乎所有内容，比如播放头的位置、任一子元素的startTime即使播放/暂停/反转时间轴或更改timeScale本身。

序列编排​

第一步，创建一个时间轴：

var tl = gsap.timeline();

然后使用其中一个便捷方法添加一个补间动画——to(), from()，或者fromTo():

tl.to(".box", { duration: 2, x: 100, opacity: 0.5 });

多次执行此操作。请注意我们调用了.to() 在时间轴实例上（在这个例子中的变量tl），而不是直接在gsap对象上调用。这会创建一个补间动画，并立即将其放入特定的Timeline中。gsap.to()相比之下，则会创建一个独立的补间动画。默认情况下，动画会依次播放。你甚至可以通过链式调用简化代码如下：

//sequenced one-after-the-other
tl.to(".box1", { duration: 2, x: 100 }) //notice that there's no semicolon!
  .to(".box2", { duration: 1, y: 200 })
  .to(".box3", { duration: 3, rotation: 360 });

定位​

使用可选的精确定义你希望动画插入时间轴的具体位置。position参数。数值表示绝对时间（以秒为单位），字符串则可用"+="或者"-="前缀表示相对于时间轴末尾的偏移量。例如，"+=2"表示在末尾两秒后，创建一个两秒的间隔。"-=2"表示创建一个两秒的重叠。

标签​

使用标签标记时间轴上的特定位置，以便你可以在那里放置动画或回放期间导航到这些位置。

//add a label at exactly 3 seconds
tl.addLabel("step2", 3)

//then later, we can seek() to that spot:
tl.seek("step2");

控制方法​

Tween和时间轴都继承自Animation类，这个类提供了大量有用的方法和属性。以下是一些最常用的方法：

pause()
play()
progress()
restart()
resume()
reverse()
seek()
time()
duration()
timeScale()
kill()

使用变量引用Tween或Timeline实例，然后随时对其进行控制：

//you only need to create a variable if you want to control it later...
var tween = gsap.to(...);
var tl = gsap.timeline(); //"tl" short for timeline
tl.to(...).to(...); //add animations.

//now we can control them...
tween.pause();
tween.timeScale(2); //double speed
tl.seek(3); //jump to 3 seconds in
tl.progress(0.5); //halfway through
...