前面的話

TweenJS提供了一個簡單但強大的漸變界面。它支持漸變的數字對象屬性&CSS樣式屬性，并允許鏈接補間動畫和行動結合起來，創造出復雜的序列。本文將詳細介紹tween.js的使用

 概述

tween.js允許以平滑的方式修改元素的屬性值。只需要告訴tween想修改什么值，以及動畫結束時它的最終值是什么，動畫花費多少時間等信息，tween引擎就可以計算從開始動畫點到結束動畫點之間值，來產生平滑的動畫效果

例如，假設有一個對象position，它的坐標為 x 和 y：

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

如果想改變 x 的值從100到200，只需要這樣做：

// Create a tween for position firstvar tween = new TWEEN.Tween(position); // Then tell the tween we want to animate the x property over 1000 millisecondstween.to({ x: 200 }, 1000);

到這里只是創建了tween對象，需要激活它，讓它開始動畫：

// And set it to starttween.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本身不會運行，需要通過update方法明確的告訴它什么時候開始運行。推薦在動畫主循環中使用該方法。可以通過調用requestAnimationFrame方法來獲得良好的圖像性能

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

這里使用無參數調用方式，update方法將明確當前時間，以便于獲取上一次動畫的執行時間。

也可以為update方法明確一個時間：

TWEEN.update(100);

上面語句的意思是說：update的時間=100毫秒。可以使用這種方法來明確代碼中所有隨時間變化的函數。例如，動畫已經開始，想所有動畫都同步進行，animate代碼改成這樣：

var currentTime = player.currentTime;TWEEN.update(currentTime);

控制動畫

【start和stop】

Tween.start和Tween.stop分別用于控制tween動畫的開始和結束

對于已經結束和沒有開始的動畫，Tween.stop方法不起作用。Tween.start方法同樣接收一個時間參數。如果使用了該參數，tween動畫將在延時該時間數后才開始動畫。否則它將立刻開始動畫