在 tween.js 中创建无限动画
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();
它会从开始顶点到结束顶点进行Tween,无限重复这个过程。不过,它确实使用了 async library,以便于我轻松实现从一个顶点到另一个顶点的补间。
我正在为沿直线所有顶点移动的球体创建动画。我有这个代码:
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();
它会从开始顶点到结束顶点进行Tween,无限重复这个过程。不过,它确实使用了 async library,以便于我轻松实现从一个顶点到另一个顶点的补间。