tween.js是一款可生成平滑動畫效果的js動畫庫。相關的動畫庫插件還有：snabbt.js 強大的jQuery動畫庫插件和Tweene-超級強大的jQuery動畫代理插件。
tween.js允許你以平滑的方式修改元素的屬性值。你只需要告訴tween你想修改什么值，以及動畫結束時它的最終值是什么，動畫花費多少時間等信息，tween引擎就可以計算從開始動畫點到結束動畫點之間值，來產生平滑的動畫效果。例如，假設你有一個對象position，它的坐標為 x 和 y：
var
position = { x: 100, y: 0 }
|
如果你想改變 x 的值從100到200，你只需要這樣做：
// Create a tween for position first
var
tween =
new
TWEEN.Tween(position);
// Then tell the tween we want to animate the x property over 1000 milliseconds
tween.to({ x: 200 }, 1000);
|
到這里只是創建了tween對象，你需要激活它，讓它開始動畫：
// And set it to start
tween.start();
|
最后為了平滑動畫效果，你需要在同一個循環動畫中調用TWEEN.update方法。代碼如下：
animate();
function
animate() {
requestAnimationFrame(animate);
// [...]
TWEEN.update();
// [...]
}
|
這個動作將會更新所有被激活的tweens，在1秒鍾（例如1000ms）position.x 將變為200。
你也可以使用onUpdate回調函數將結果打印到控制台上。
tween.onUpdate(
function
() {
console.log(
this
.x);
});
|
這個函數在每次tweens被更新時都被調用。它的出現頻次依賴於很多因素-例如：依賴於你的電腦或設備的運行速度。
tween.js動畫
Tween.js本身不會運行，你需要通過update方法明確的告訴它什么時候開始運行。推薦在動畫主循環中使用該方法。你可以通過調用requestAnimationFrame方法來獲得良好的圖像性能。
來看下面的例子：
animate();
function
animate() {
requestAnimationFrame(animate);
// [...]
TWEEN.update();
// [...]
}
|
這里使用無參數調用方式，update方法將明確當前時間，以便於獲取上一次動畫的執行時間。
你也可以為update方法明確一個時間：
TWEEN.update(100);
|
上面語句的意思是說：update的時間=100毫秒。你可以使用這種方法來明確代碼中所有隨時間變化的函數。例如，動畫已經開始，你想所有動畫都同步進行，你的animate代碼一改像這樣：
var
currentTime = player.currentTime;
TWEEN.update(currentTime);
|
控制tween動畫
start和stop
Tween.start和Tween.stop分別用於控制tween動畫的開始和結束。
對於已經結束和沒有開始的動畫，Tween.stop方法不起作用。Tween.start方法同樣接收一個時間參數。如果你使用了該參數，tween動畫將在延時該時間數后才開始動畫。否則它將立刻開始動畫。
update
可以通過TWEEN.update方法來執行動畫的更新。
chain
如果你想制作多個多行，例如：一個動畫在另一個動畫結束后開始。可以通過chain方法來使實現。如下的代碼，tweenB 在 tweenA 之后開始動畫:
tweenA.chain(tweenB);
|
可以像下面這樣制作一個無限循環的動畫：
tweenA.chain(tweenB);
tweenB.chain(tweenA);
|
repeat
如果你想制作循環動畫可以使用chain來實現，但是更好的方法是使用repeat方法。它接收一個用於描述你想循環多少次的參數：
tween.repeat(10);
// repeats 10 times and stops
tween.repeat(Infinity);
// repeats forever
|
yoyo
這個函數只在你使用repeat方法是起作用。當它被激活時，tween 的效果類似yoyo效果。該效果是動畫會在開始或結束處向反方向反彈。
delay
delay方法用於控制動畫之間的延時。
tween.delay(1000);
tween.start();
|
全局方法
以下的方法定義在 TWEEN 的全局對象中，其中大多數方法你都用不上，除了update方法：
TWEEN.update(time)
該方法用於所有被激活的tweens，如果time沒有被指定，將使用當前時間。
TWEEN.getAll 和 TWEEN.removeAll
這兩個方法用於胡獲取被激活的tweens數組的一個引用，或從數組中刪除所有tweens。
TWEEN.add(tween) 和 TWEEN.remove(tween)
用於向被激活的tweens中添加一個tween，或移除一個tween。
以上方法通常只是在內部使用，一般情況下你了解即可。
可用的easing函數：TWEEN.Easing
tween.js提供了一些可用的easing函數。可用函數有：Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back 和 Bounce。easing 類型分為: In, Out 和 InOut.
http://learningthreejs.com/data/tweenjs_for_smooth_animation/tweenjs_for_smooth_animation.html
http://sole.github.io/tween.js/examples/03_graphs.html
使用自定義的Easing函數
你不但可以使用tween.js提供的easing函數，還可以自定義easing函數。但必須遵守下面的規則：
- 它必須接收一個參數。
- 它必須基於輸入參數返回一個值。
easing函數僅在每個tween每次被更新時調用，而不管有多少屬性被改變。結果隨后會被用於初始值：
easedElapsed = easing(k);
for
each property:
newPropertyValue = initialPropertyValue + propertyDelta * easedElapsed;
|
下面是一個使用Math.floor來做easing效果的例子：
function
tenStepEasing(k) {
return
Math.floor(k * 10) / 10;
}
|
你可以在tween 這樣使用它：
tween.easing(tenStepEasing);
|
回調函數
另外一個有用的特性是你可以在每次tween循環周期的指定時間點調用自定義的函數。
例如：假設你想使一些不能直接修改參數的對象執行動畫，要訪問該對象的參數只能通過setter方法，你可以通過update方法的回調函數來設置新的setter值。
var
trickyObjTween =
new
TWEEN.Tween({
propertyA: trickyObj.getPropertyA(),
propertyB: trickyObj.getPropertyB()
})
.to({ propertyA: 100, propertyB: 200 })
.onUpdate(
function
() {
this
.setA(
this
.propertyA );
this
.setB(
this
.propertyB );
});
|
或者如果你想確認tween動畫開始后某個對象指定狀態下的某個值，你可以通過start回調來獲取它：
var
tween =
new
TWEEN.Tween(obj)
.to({ x: 100 })
.onStart(
function
() {
this
.x = 0;
});
|
onStart
tween開始動畫前的回調函數。
onStop
tween結束動畫后的回調函數。
onUpdate
在tween每次被更新后執行。
onComplete
在tween動畫全部結束后執行。
更多關於tween的資料請參考：https://github.com/sole/tween.js/blob/master/docs/user_guide.md
tween的相關資料：Tween.js for Smooth Animation