在tween.js中創建無限動畫

我正在爲沿線的所有頂點移動的球體創建動畫。我有這樣的代碼：在tween.js中創建無限動畫

var vertices = mesh.geometry.vertices; 
var duration = 100; 
// Iterate through each vertex in the line, starting at 1. 
for (var i = 1, len = vertices.length; i < len; i++) { 
// Set the position of the sphere to the previous vertex. 
    sphere.position.copy(vertices[i - 1]); 
// Create the tween from the current sphere position to the current vertex. 
    new TWEEN.Tween(sphere.position).to(vertices[i], duration).delay(i * duration).start(); 

}

我該怎麼做才能讓當球體上的最後一個頂點，現場重新開始動畫。

來源

2015-12-14 yavg

你可以爲函數創建兩個獨立的循環，一個從頭到尾，另一個從頭到尾，在兩個for循環中，當你在最後一次迭代時，啓動另一個for循環。如果你不希望它從頭到尾回來，你可以在最後一次迭代之後再次調用start到end函數。 – leroydev

@leroydev感謝您的迴應，但我該如何做到這一點？如何在動畫結束時做到這一點，又是函數調用還是讓循環再次無限啓動的東西？ – yavg

這聽起來像是[重複]的工作（https://github.com/tweenjs/tween.js/blob/master/docs/user_guide.md#repeat），正如官方文檔中所解釋的那樣，你應該給詳細閱讀，看看它是否包含設置多個補間然後重複運行它們的示例。 –

我有yavg私人聊天，和下面的解決方案工作：

var vertices = mesh.geometry.vertices; 
var duration = 10; 

function startToEnd() { 
    var i = 0; 
    async.eachSeries(vertices, function(vertice, callback) { 
    if (i !== 0) { 
     sphere.position.copy(vertices[i - 1]); 
     new TWEEN.Tween(sphere.position).to(vertices[i], duration).delay(duration).onComplete(function() { 
     callback(null); 
     }).start(); 
    } else { 
     callback(null); 
    } 
    i++; 
    }, startToEnd); 
} 
startToEnd();

它會從一開始就吐溫vertix到底vertix和無限重複這一過程。儘管如此，它確實使用了async library來簡化從一個頂點到另一個頂點的Tweening實現。

來源

2015-12-15 18:46:28 leroydev

謝謝...或多或少我明白你對我的解釋.. 但不起作用，我得到這個錯誤：「TypeError：無法讀取屬性'x'的未定義在THREE.Vector3.copy（三（script.js：519） at endToStart（script.js：532） at startToEnd（script.js：527）「 – yavg

我不知道其餘部分的詳細信息你的腳本也不是我熟悉你正在使用的庫，但是當你從1循環時，我已經循環到0，我現在修復它，也許它修復了你的問題。（取決於第一個頂點是否與其他頂點不同） – leroydev

非常感謝你的親切。現在的問題是，不加載網站崩潰。 :( – yavg

在tween.js中創建無限動畫

回答

相關問題