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對象，所以可以鏈式調用。