tween.js学习总结

最近在three.js中用到tween.js,所以就做一个总结

tween.js是一个补间动画库，我们可以用来做规定时间内的对象属性的数值变化，而且起始值到最终值的变化是自动变化的
可在three.js官网的例子查看tween.js在three.js中的应用

代码说明：

var position = { x: 100, y: 0 }//假设一个位置,坐标为（100,0）
var tween = new TWEEN.Tween(position).to（{x:200},1000);//就会在1000毫秒内x会从100移动到200

而启动动画还需要两个函数：

tween.start()

TWEEN.update();

tween.js的默认动画运动轨迹是直线，所以在camera上应用在圆周运动，就需要改变tween.js的运动轨迹，这篇文章Three.js自定义相机旋转动画：沿圆弧旋转可以作为参考

tween.js除了提供.to()和.start()，还提供了以下几个回调函数来设置开始动画前，在动画过程中，动画结束后

.onStart()

开始动画前的回调函数。

.onStop()

结束动画后的回调函数。

.onUpdate()

控制动画过程中的操作。

.onComplete()

在动画全部结束后执行。

可以调用chain()函数使动画循环播放或是几个动画连续播放。

var tween2 = new TWEEN.Tween(position).to（{y:200},1000);//就会在1000毫秒内x会从0移动到200

tween.chain(tween2);//tween结束后就执行tween2
//tween2.chain(tween)//加上这句就可以循环播放动画了
tween.start()//由tween先开始   

更多关于tween的资料请参考：https://github.com/sole/tween.js/blob/master/docs/user_guide.md