javascript - 在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();

它将从起始顶点到结束顶点之间进行补间，并无限地重复此过程。不过，它确实使用async library来简化对我的从一个顶点到另一个顶点的补间。

关于javascript - 在tween.js中创建无限动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34277887/