tween.js怎么用

這篇文章將為大家詳細講解有關tween.js怎么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

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

例如，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 調用此循環以獲得最佳的圖形性能。

比如之前這個例子：

animate();

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

如果調用的時候不傳入參數，update 將會判斷當前時間點以確定自上次運行以來已經有多久。

當然你也可以傳遞一個明確的時間參數給 update

TWEEN.update(100);

意思是"更新時間 = 100 毫秒"。你可以使用它來確保代碼中的所有時間相關函數都使用相同的時間值。例如，假設你有一個播放器，并希望同步運行補間。 你的 animate 函數可能看起來像這樣：

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

我們使用明確的時間值進行單元測試。你可以看下tests.js 這個例子，看看我們如何用不同的值調用TWEEN.update() 來模擬時間傳遞。

控制一個補間

start 和 stop

到目前為止，我們已經了解了Tween.start方法，但是還有更多的方法來控制單個補間。 也許最重要的一個是 star 對應的方法：停止 。 如果你想取消一個補間，只要調用這個方法通過一個單獨的補間:

tween.stop();

停止一個從未開始或已經停止的補間沒有任何效果。 沒有錯誤被拋出。

start 方法接受一個參數 time。如果你使用它，那么補間不會立即開始，直到特定時刻，否則會盡快啟動（i.e 即在下次調用 TWEEN.update）。

update

補間也有一個更新的方法---這實際上是由 TWEEN.update 調用的。 你通常不需要直接調用它，除非你是個 瘋狂的hacker。

chain

當你順序排列不同的補間時，事情會變得有趣，例如在上一個補間結束的時候立即啟動另外一個補間。我們稱這為鏈式補間，這使用 chain 方法去做。因此，為了使 tweenB 在 tewwnA 啟動：

tweenA.chain(tweenB);

或者，對于一個無限的鏈式，設置tweenA一旦tweenB完成就開始：

tweenA.chain(tweenB);
tweenB.chain(tweenA);

關于無限的鏈式查看Hello world 。

在其他情況下，您可能需要將多個補間鏈接到另一個補間，以使它們（鏈接的補間）同時開始動畫：

tweenA.chain(tweenB,tweenC);

警告：調用 tweenA.chain（tweenB） 實際上修改了tweenA，所以tweenA總是在tweenA完成時啟動。 chain 的返回值只是tweenA，不是一個新的tween。

repeat

如果你想讓一個補間永遠重復，你可以鏈接到自己，但更好的方法是使用 repeat 方法。 它接受一個參數，描述第一個補間完成后需要多少次重復

tween.repeat(10); // 循環10次
tween.repeat(Infinity); // 無限循環

補間的總次數將是重復參數加上一個初始補間。查看 Repeat。

yoyo

這個功能只有在獨自使用 repeat 時才有效果。 活躍時，補間的行為將像 yoyo 一樣，i.e 它會從起始值和結束值之間跳出，而不是從頭開始重復相同的順序。

delay

更復雜的安排可能需要在實際開始運行之前延遲補間。 你可以使用 delay 方法來做到這一點

tween.delay(1000);
tween.start();

將在調用啟動方法后的1秒鐘后開始執行。

控制所有補間

在 TWEEN 全局對象中可以找到以下方法，除了 update 之外，通常不需要使用其中的大部分對象。

TWEEN.update(time)

我們已經討論過這種方法。 它用于更新所有活動的補間。

如果 time 不指定，它將使用當前時間。

TWEEN.getAll and TWEEN.removeAll

用于獲取對活動 tweens 數組的引用，并分別僅從一個調用中將它們全部從數組中刪除

TWEEN.add(tween) and TWEEN.remove(tween)

用于將補間添加到活動補間的列表，或者分別從列表中刪除特定的補間。

這些方法通常只在內部使用，但是如果您想要做一些有趣的事情，則會被暴露。

控制補間組

使用 TWEEN 單例來管理補間可能會導致包含許多組件的大型應用程序出現問題。 在這些情況下，您可能希望創建自己的更小的補間組。

示例：交叉組件沖突

如果使用 TWEEN 有多個組件，并且每個組件都想管理自己的一組補間，則可能發生沖突。 如果一個組件調用 TWEEN.update（） 或 TWEEN.removeAll（），則其他組件的補間也將被更新或刪除。

創建你自己的補間組

為了解決這個問題，每個組件都可以創建自己的 TWEEN.Group 實例（這是全局的 TWEEN 對象在內部使用的）。 實例化新的補間時，可以將這些組作為第二個可選參數傳入：

var groupA = new TWEEN.Group();
var groupB = new TWEEN.Group();

var tweenA = new TWEEN.Tween({ x: 1 }, groupA)
 .to({ x: 10 }, 100)
 .start();

var tweenB = new TWEEN.Tween({ x: 1 }, groupB)
 .to({ x: 10 }, 100)
 .start();

var tweenC = new TWEEN.Tween({ x: 1 })
 .to({ x: 10 }, 100)
 .start();

groupA.update(); // 只更新tweenA
groupB.update(); // 只更新tweenB
TWEEN.update(); // 只更新tweenC

groupA.removeAll(); // 只移除tweenA
groupB.removeAll(); // 只移除tweenB
TWEEN.removeAll(); // 只移除tweenC

通過這種方式，每個組件都可以處理創建，更新和銷毀自己的一組補間。

改變緩動功能

Tween.js 將以線性方式執行值之間的插值（即緩動），所以變化將與流逝的時間成正比。 這是可以預見的，但在視覺上也是相當無趣的。 不要擔心 - 使用緩動方法可以輕松更改此行為。 例如：

tween.easing(TWEEN.Easing.Quadratic.In);

這將導致緩慢地開始向最終值變化，向中間加速，然后迅速達到其最終值，相反，TWEEN.Easing.Quadratic.Out 一開始會加速，但隨著值的接近最終放緩。

可用的緩動函數：TWEEN.Easing

tween.js提供了一些現有的緩動功能。它們按照它們表示的方程式進行分組：線性，二次，三次，四次，五次，正弦，指數，圓形，彈性，背部和彈跳，然后是緩動型：In，Out和InOut。

除非您已經熟悉這些概念，否則這些名稱可能不會對您說什么，所以您可能需要查看 Graphs 示例，該示例將一個頁面中的所有曲線進行圖形化，以便比較它們如何看待一瞥。

這些功能是從 Robert Penner 慷慨地提供幾年前作為自由軟件提供的原始方程派生而來的，但是已經被優化以便與JavaScript很好地發揮作用。

使用自定義緩動功能

您不僅可以使用任何現有的功能，還可以提供您自己的功能，只要遵循一些約定即可：

它必須接受一個參數：

k: 緩動過程，或我們的補間所處的時間有多長。允許的值在[0，1]的范圍內。

它必須根據輸入參數返回一個值。

不管要修改多少個屬性，easing函數在每次更新時只調用一次。 然后將結果與初始值以及這個值和最終值之間的差值（delta）一起使用，就像這個偽代碼一樣：

easedElapsed = easing(k);
for each property:
 newPropertyValue = initialPropertyValue + propertyDelta * easedElapsed;

對于更注重性能表現的人來說：只有在補間上調用 start() 時才會計算增量值。

因此，讓我們假設您想使用一個緩解值的自定義緩動函數，但是將 Math.floor 應用于輸出，所以只返回整數部分，從而產生一種梯級輸出:

function tenStepEasing(k) {
 return Math.floor(k * 10) / 10;
}

你可以通過簡單地調用它的緩動方法來使用它，就像我們之前看到的那樣：

tween.easing(tenStepEasing);

查看 graphs for custom easing functions 示例，以查看這個動作（還有一些用于生成步進函數的元編程）。

回調函數

另一個強大的特性是能夠在每個補間的生命周期的特定時間運行自己的功能。 當更改屬性不夠時，通常需要這樣做。

例如，假設你正在試圖給一些不能直接訪問屬性的對象設置動畫，但是需要你調用setter。 您可以使用 update 回調來讀取新的更新值，然后手動調用setters。 所有的回調函數都將補間對象作為唯一的參數。

var trickyObjTween = new TWEEN.Tween({
 propertyA: trickyObj.getPropertyA(),
 propertyB: trickyObj.getPropertyB()
})
 .to({ propertyA: 100, propertyB: 200 })
 .onUpdate(function(object) {
 object.setA( object.propertyA );
 object.setB( object.propertyB );
 });

或者想象一下，當一個補間開始時，你想播放聲音。你可以使用 start 回調：

var tween = new TWEEN.Tween(obj)
 .to({ x: 100 })
 .onStart(function() {
 sound.play();
 });

每個回調的范圍是補間對象--在這種情況下，是 obj。

onStart

在補間開始之前執行--i.e. 在計算之前。每個補間只能執行一次，i.e. 當通過 repeat() 重復補間時，它將不會運行。

同步到其他事件或觸發您要在補間啟動時發生的操作是非常好的。

補間對象作為第一個參數傳入。

onStop

當通過 stop() 顯式停止補間時執行，但在正常完成時并且在停止任何可能的鏈補間之前執行補間。

補間對象作為第一個參數傳入。

onUpdate

每次補間更新時執行，實際更新后的值。

補間對象作為第一個參數傳入。

onComplete

當補間正常完成（即不停止）時執行。

補間對象作為第一個參數傳入。

高級補間

相對值

使用 to 方法時，也可以使用相對值。 當tween啟動時，Tween.js將讀取當前屬性值并應用相對值來找出新的最終值。

但是你需要使用引號，否則這些值將被視為絕對的。 我們來看一個例子:

// This will make the `x` property be 100, always
var absoluteTween = new TWEEN.Tween(absoluteObj).to({ x: 100 });

// Suppose absoluteObj.x is 0 now
absoluteTween.start(); // Makes x go to 100

// Suppose absoluteObj.x is -100 now
absoluteTween.start(); // Makes x go to 100

// In contrast...

// This will make the `x` property be 100 units more,
// relative to the actual value when it starts
var relativeTween = new TWEEN.Tween(relativeObj).to({ x: "+100" });

// Suppose relativeObj.x is 0 now
relativeTween.start(); // Makes x go to 0 +100 = 100

// Suppose relativeObj.x is -100 now
relativeTween.start(); // Makes x go to -100 +100 = 0

查看09_relative_values 示例。

補間值的數組

除了補間為絕對值或相對值之外，還可以讓Tween.js跨一系列值更改屬性。 要做到這一點，你只需要指定一個數組的值，而不是一個屬性的單個值。 例如：

var tween = new TWEEN.Tween(relativeObj).to({ x: [0, -100, 100] });

將使 x 從初始值變為0，-100和100。

這些值的計算方法如下：

1. 首先，補間進度如常計算

2. 進度（從0到1）用作插值函數的輸入

3. 基于進度和值的數組，生成內插值

例如，當補間剛剛啟動（進度為0）時，插值函數將返回數組中的第一個值。 當補間到一半時，插值函數將返回一個大約在數組中間的值，當補間結束時，插值函數將返回最后一個值。

您可以使用插值方法更改插值函數。 例如：

tween.interpolation( TWEEN.Interpolation.Bezier );

以下值可用：

1. TWEEN.Interpolation.Linear

2. TWEEN.Interpolation.Bezier

3. TWEEN.Interpolation.CatmullRom

默認是 Linear。

請注意，插值函數對于與同一補間中的數組進行補間的所有屬性是全局的。
您不能使用數組和線性函數進行屬性A的更改，也不能使用相同的補間進行數組B的屬性B和Bezier函數的更改; 您應該使用運行在同一對象上的兩個補間對象，但修改不同的屬性并使用不同的插值函數。

查看 06_array_interpolation 示例。

獲得最佳性能

雖然Tween.js試圖自己執行，但是沒有什么能夠阻止你以一種反作用的方式使用它。 這里有一些方法可以避免在使用Tween.js時（或者在網頁中進行動畫制作時）減慢項目速度。

使用高性能的CSS

當您嘗試在頁面中設置元素的位置時，最簡單的解決方案是為 top 和 left 屬性設置動畫，如下所示：

var element = document.getElementById('myElement');
var tween = new TWEEN.Tween({ top: 0, left: 0 })
 .to({ top: 100, left: 100 }, 1000)
 .onUpdate(function(object) {
 element.style.top = object.top + 'px';
 element.style.left = object.left + 'px';
 });

但這實際上是效率低下的，因為改變這些屬性會迫使瀏覽器在每次更新時重新計算布局，這是非常昂貴的操作。 相反的，您應該使用 transform，這不會使布局無效，并且在可能的情況下也將被硬件加速，比如：

var element = document.getElementById('myElement');
var tween = new TWEEN.Tween({ top: 0, left: 0 })
 .to({ top: 100, left: 100 }, 1000)
 .onUpdate(function(object) {
 element.style.transform = 'translate(' + object.left + 'px, ' + object.top + 'px);';
 });

如果你想了解更多關于這個，看看這篇文章。

但是，如果您的動畫需求非常簡單，那么在適用的情況下使用CSS動畫或轉換可能會更好，以便瀏覽器盡可能優化。
當您的動畫需要涉及復雜的布局時，Tween.js是非常有用的，也就是說，您需要將多個補間同步到一起，在完成一些動作之后，循環多次等等。

對垃圾收集器（別名GC）

如果你使用onUpdate回調函數，你需要非常小心的使用它。 因為這個函數每秒鐘會被調用很多次，所以如果每次更新都要花費很多的代價，那么你可能會阻塞主線程并導致可怕的結果，或者如果你的操作涉及到內存分配的話， 垃圾收集器運行太頻繁，也導致結果。 所以只是不要做些事情中的其中一個。 保持你的onUpdate回調非常輕量級，并確保在開發時也使用內存分析器。

瘋狂的補間

這是你可能不經常使用的東西，但是你可以在Tween.js之外使用補間公式。 畢竟，它們只是功能。 所以你可以使用它們來計算平滑曲線作為輸入數據。

例如，他們用于在 這個實驗 中生成音頻數據。

關于“tween.js怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。