補間(動畫)是一個概念，允許你以平滑的方式更改對象的屬性。你只需告訴它哪些屬性要更改，當補間結束運行時它們應該具有哪些最終值，以及這需要多長時間，補間引擎將負責計算從起始點到結束點的值。

例如，position對象擁有x和y兩個坐標:

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

如果你想將x坐標的值從100變成200，你應該這么做：

// 首先為位置創建一個補間(tween)var tween = new TWEEN.Tween(position);// 然后告訴 tween 我們想要在1000毫秒內以動畫的形式移動 x 的位置tween.to({ x: 200 }, 1000);

一般來說這樣還不夠，tween 已經被創建了，但是它還沒被激活(使用)，你需要這樣啟動：

// 啟動tween.start();

最后，想要成功的完成這種效果，你需要在主函數中調用TWEEN.update，如下使用：

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

這樣在更新每幀的時候都會運行補間動畫；經過 1秒后 (1000 毫秒) position.x將會變成 200。

除非你在控制臺中打印出 x 的值，不然你看不到它的變化。你可能想要使用 onUpdate 回調:

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

tips:你可能在這里獲取不到 object.x ,具體的見我提的這個 issue

這個函數將會在動畫每次更新的時候被調用；這種情況發生的頻率取決于很多因素 - 例如，計算機或設備的速度有多快（以及如何繁忙）。

到目前為止，我們只使用補間動畫向控制臺輸出值，但是您可以將它與 three.js 對象結合：

var tween = new TWEEN.Tween(cube.position) .to({ x: 100, y: 100, z: 100 }, 10000) .start();animate();function animate() { requestAnimationFrame(animate); TWEEN.update(); threeRenderer.render(scene, camera);}

在這種情況下，因為three.js渲染器將在渲染之前查看對象的位置，所以不需要使用明確的onUpdate回調。

你可能也注意到了一些不同的地方：tween.js 可以鏈式調用！ 每個tween函數都會返回tween實例，所以你可以重寫下面的代碼：

var tween = new TWEEN.Tween(position);tween.to({ x: 200 }, 1000);tween.start();

改成這樣：

var tween = new TWEEN.Tween(position) .to({ x: 200 }, 1000) .start();

在將會看到很多例子，所以熟悉它是很好的！比如04-simplest 這個例子。

tween.js的動畫

Tween.js 不會自行運行。你需要顯式的調用 update 方法來告訴它何時運行。推薦的方法是在主動畫循環中執行這個操作。使用 requestAnimationFrame 調用此循環以獲得最佳的圖形性能。

比如之前這個例子：