[英]create infinite animation in 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();
}
當球體位於最后一個頂點時,我該怎么做呢?
我與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();
它將從起始頂點到結束頂點之間進行補間,並無限地重復此過程。 不過,它確實使用了異步庫 ,為我簡化了從一個頂點到另一個頂點的Tweening實現。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.