三、gsap（动画）

        在上图中的动画是通过改变材质的offset属性来移动的，使用的是gsap.js，那么什么是gsap呢，物体的移动还有什么方法呢。

官网地址：GreenSock

Gsap使用地址：Getting Started with GSAP - Learning Center - GreenSock

GSAP（GreenSockAnimationPlatform）一共有两个版本。

        一个为ActionScript 版本，已经在flash平台上运行多年，是一个“轻量级”、“高效率”、强大的2D动画引擎，一直深受ASer（学ActionScript的人都叫自己 ASer）的欢迎，学AS的人，没有一个说是不知道、没使用过GSAP的。

        GSAP JS顾名思义是指GSAP的js版本，GSAP JS是GreenSock公司新出的一个2D动画引擎，可以说是AS版本的移植版，虽然功能还不够AS版本的完善，但是一样是非常强大、高效、好用的，据说它的运行速度是JQuery的20倍。当然，这是说动画方面的，jQery也有自己的强大之处（比如jQuery强大的选择器）。

想测试的话可以登录这个网站：https://greensock.com/js/speed.html

1.gsap

使用方法

gsap.to(target, vars)

该动画花费5s从当前的位置移动到100的位置

  gsap.to("div", {
        duration: 5,
        x: 100
      });

剩下的大家都可以看官网，gsap.form(), gsap.formTo()等等apI

2.setInterval或者requestAnimationFrame

这种方法的意义是都是根据每间隔一定时间来调用方法

setInterval说的是每隔一个固定的时间间隔后就精确地执行某动作

requestAnimationFrame是根据浏览器的动画帧，每次执行代码时，检查与上帧的时间差，如果大于指定的间隔，进行绘制，将更新上帧的时间。有可能是40ms，也可能是60ms。

3.css animation

animation 属性用来指定一组或多组动画，每组之间用逗号相隔。其实也是就是使用jquery来配合threejs来实现动画。

animation: 3s linear 1s slidein;
@keyframes slidein {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }}
}

以上就是在three项目中gsap动画的使用，细致的API方法可以到官网去寻找使用的案例，或者私信我们一起来探讨