tween.js是一款可生成平滑動畫效果的js動畫庫。tween.js容許你以平滑的方式修改元素的屬性值。它能夠經過設置生成各類相似CSS3的動畫效果。

tween.js是一款可生成平滑動畫效果的js動畫庫。相關的動畫庫插件還有：snabbt.js 強大的jQuery動畫庫插件和Tweene-超級強大的jQuery動畫代理插件。html

tween.js容許你以平滑的方式修改元素的屬性值。你只須要告訴tween你想修改什麼值，以及動畫結束時它的最終值是什麼，動畫花費多少時間等信息，tween引擎就能夠計算從開始動畫點到結束動畫點之間值，來產平生滑的動畫效果。例如，假設你有一個對象position，它的座標爲 x 和 y：git

var position = { x: 100, y: 0 }

若是你想改變 x 的值從100到200，你只須要這樣作：github

// 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方法。代碼以下：ide

animate();
 
function animate() {
    requestAnimationFrame(animate);
    // [...]
    TWEEN.update();
    // [...]
}

這個動做將會更新全部被激活的tweens，在1秒鐘（例如1000ms）position.x 將變爲200。函數

你也可使用onUpdate回調函數將結果打印到控制檯上。post

tween.onUpdate(function() {
    console.log(this.x);
});

這個函數在每次tweens被更新時都被調用。它的出現頻次依賴於不少因素-例如：依賴於你的電腦或設備的運行速度。性能

tween.js動畫

Tween.js自己不會運行，你須要經過update方法明確的告訴它何時開始運行。推薦在動畫主循環中使用該方法。你能夠經過調用requestAnimationFrame方法來得到良好的圖像性能。動畫

來看下面的例子：ui

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.

使用自定義的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