在上图中的动画是通过改变材质的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方法可以到官网去寻找使用的案例，或者私信我们一起来探讨