GSAP 是一个强大的 JavaScript 工具集，让大家秒变动画大佬。构建适用于所有主流浏览器的高性能动画。动画 CSS、SVG、画布、React、Vue、WebGL、颜色、字符串、运动路径、通用对象...... JavaScript 可以触摸的任何东西！GSAP 的ScrollTrigger插件让您可以用最少的代码创建令人瞠目结舌的滚动动画。

1 安装GSAP模块

npm install gsap

2 创建动画

例如，如果html元素创建动画，将 '.box' 类的元素设置1秒时间水平移动 200px 的动画。可以这么编写

在three.js中如果我们想要将物体，例如立方体移动设置1秒时间水平移动 200px 的动画。可以这么编写

gsap.to() - 这是最常见的补间类型。是设置当前元素或者变量的状态，到设置的状态的补间动画。所谓的补间动画，就是2个关键帧（即2种物体的状态）有了，框架自带计算出中间某个时刻的状态，从而填补2个状态间，动画的空白时刻，从而实现完整动画。

gsap.to有2个参数，第一个是目标元素或者变量。如果传入的是.box之类的css字符串选择器，GSAP 在后台使用document.querySelectorAll()选中页面的匹配的元素。当第一个目标是对象时，GSAP就会对其属性值进行修改来实现补间动画。

3 GSAP设置动画的属性

如何是html元素，可以设置的属性有

对应CSS样式属性

下面演示向右水平移动+旋转.box元素的效果

默认情况下，GSAP 将使用 px 和度数进行变换，但您可以使用其他单位，例如 vw、弧度，甚至可以进行自己的 JS 计算或相对值！

例如：

如果第一个参数目标不是html元素，也可以是对象。。您可以针对任何对象的任何属性，甚至是您创建的任意属性，如下所示

这里可以让obj.myNum值从10变化到200，也可以让颜色myColor的值从红色变化到蓝色。每一次更新值的时候，执行onUpdate所设置的回调函数。

4 GSAP特殊属性控制动画

duration：动画持续时间（秒） 默认值：0.5

delay：动画开始前的延迟量（秒）

repeat：动画应该重复多少次。-1为一直重复

yoyo：如果为 true，则每隔一个重复，补间将沿相反方向运行。（像悠悠球一样）默认值：false

ease：控制动画期间的变化率。

onComplete：动画完成时调用的函数

onUpdate：动画值更新时调用的函数

ease动画属性设置

缓动可能是动作设计中最重要的部分。精心挑选的轻松将为您的动画增添个性并注入活力。

在下面的演示中看看 no ease 和bounce ease 之间的区别！绿色盒子以匀速的速度旋转，而紫色盒子带有“反弹”旋转动画，感觉就不一样。

在引擎内部，“ease”是一种数学计算，用于控制补间期间的变化率。但不用担心，框架会为您做所有的数学计算！您只需坐下来选择最适合我们的动画的效果即可。

对于大多数效果，分为三种类型in、out、inOut。这些控制了轻松过程中的动量。

像这样的 设置ease："power1.out" 是 UI 过渡的最佳选择；它们启动速度很快，这有助于 UI 感觉反应灵敏，然后它们在接近尾声时放松，给人一种自然的摩擦感。

理解ease的最好方法是玩转ease配置的可视化工具！

地址：https://greensock.com/get-started/#greenSockEaseVisualizer

效果：

Staggers交错

这是我们最喜欢的技巧之一！如果补间有多个目标，您可以轻松地在每个动画的开始之间添加一些交错效果：

这里stagger设置0.2，即为将.box选中多个元素设置为每隔0.2秒开始运动1个元素实现效果。

时间线-Timelines

时间线是创建易于调整、有弹性的动画序列的关键。当您将补间添加到时间线时，默认情况下，它们会按照添加的顺序一个接一个地播放。

5 Threejs场景种应用

设置立方体旋转

设置立方体来回往返运动

让双击画面，控制立方体动画暂停和恢复动画，前面创建的animate1这个动画实例，有isActive方法，可以用来获取当前动画是暂停还是播放状态，播放状态时isActive方法返回为true，暂停时为false，根据这个状态来调用pause方法来暂停动画和恢复动画。

6 综合上述代码

1、在前面创建的项目中的main.js文件写入代码