Tween.js的使用示例

可参考：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对象，所以可以链式调用。