tween.js学习总结 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移动到200tween.chain(tween2); //tween结束后就执行tween2 //tween2.chain(tween)//加上这句就可以循环播放动画了 tween.start()//由tween先开始

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