CODEWITHSUNDEEP
javascriptanimationtween.js
yavg
yavg

Reputation: 3051

create infinite animation in tween.js

I am creating an animation for a sphere moving along all the vertices of a line. I have this code:

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

}

How I can do to make when the sphere is on the last vertex, the field start over again animation.

Upvotes: 0

Views: 1429

Answers (1)

leroydev
leroydev

Reputation: 2945

I had a private chat with yavg, and the following solution works:

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

It'll Tween from the start vertix to the end vertix and repeat this process infinitely. It does use the async library though, to ease implementing Tweening from one vertix to the other for me.

Upvotes: 1

Related Questions