Creating many tweens, very quickly - Tween re-use / performance (Tween.js)

Question

I am using tween.js. I have a use case that requires creating many tweens very rapidly.

I am concerned about minimizing CPU and garbage collection, and so I am trying to minimize the creation of objects with "new". But, it seems that the only way to start a tween is to create a new tween object.

Is there a way to take an existing tween object and reinitialize/re-use it?

You could create all the tweens on page load and then call the .start() method only when you need it. I think that might work. — Jonas Grumann
@JonasGrumann: I don't know what the tween parameters will be in advance. — William Fields

mikebolt mikebolt · Accepted Answer · 2016-12-13T06:13:21

Almost. You can re-use a tween if the new tween has the same tweened object (the one passed to the constructor).

If you are willing to modify tween.js, you can add this function inside the Tween function:

this.setObject = function (newObject) {
    _object = newObject;
};

Now you can re-use the same tween with a different tweened object. You should always use setObject followed by to followed by start. I did test this out, and it worked, but something will probably break. For example, if you don't call tween.chain([]) on an old tween that had a chained tween, then the new tween will still be chained, and if you are re-using all of your tweens that could cause chaos.

Creating many tweens, very quickly - Tween re-use / performance (Tween.js)

1 Answers