可参考：http://www.htmleaf.com/jQuery/Layout-Interface/201501271284.html
官方文档：https://github.com/tweenjs/tween.js/blob/master/docs/user_guide.md http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/
1.Tween原意是补间动画，也就是给出一个物体的原始位置和目标位置，Tween会在原始位置和目标位置补充动画，实现移动的动画效果。
2.从原始位置到目标位置中间有过渡，过渡的效果有很多，Linear.None,Elastic.InOut等等
3.TWEEN有几个callback事件，onStart,onStop,onComplete等，用法是
- new TWEEN.Tween(position).to(target, 2000).easing(TWEEN.Easing.Linear.None).onComplete(function(){
- console.log("done")
- }).start()
使用步骤：
①创建Tween对象，指明初始位置和目标位置
- <pre name="code" class="javascript">var position = { x : 0, y: 300 };
- var target = { x : 400, y: 50 };
- new TWEEN.Tween(position).to(target, 2000).easing(TWEEN.Easing.Linear.None).start()
其中2000表示从开始位置到目标位置需要2秒
②指明过渡形式
- tween.easing(TWEEN.Easing.Linear.None)
这里选择了线性过渡
③启动Tween
- tween.start();
④定期更新tween，一般放入在render循环里
- TWEEN.update();
以上代码可精简为
- var position = { x : 0, y: 300 };
- var target = { x : 400, y: 50 };
- new TWEEN.Tween(position).to(target, 2000).easing(TWEEN.Easing.Linear.None).start()
因为TWEEN的每一个函数都返回tween对象，所以可以链式调用。