automatic animation loop

[mikebolt]

I suggest that we add a 'TWEEN.animate' convenience method. It would set up a simple requestAnimationFrame animation loop.

function animate(time) {
	requestAnimationFrame(animate);
	TWEEN.update(time);
}
requestAnimationFrame(animate);

In the documentation, we just need to tell users to use this method once before starting any tweens.

We might need a shim for Node.js.

[siwel]

This sounds fairly handy to reduce boilerplate, and such. I have a few suggestions;

• Gaurd against the animate function being called multiple times / ensure we don't end up with multiple animation loops ➰
• Getter for the current state - looping / deactivate
• Ability to stop the animation

Any thoughts? Lewis

[trusktr]

@mikebolt Can you post a sample of code that shows what you're thinking the usage would look like?

[claus]

I realize that this issue is old but i thought i let you know that i wrote a Proxy wrapper around tweenjs that does what you're asking for. Tweenjs API stays like it is, so you can call all its methods. Caveats: currently starts a rAF for every tween (it doesn't reuse a global one), and uses Proxy which might have performance implications (although it should be fine really).

https://codepen.io/claus/pen/vYGQwNO https://gist.github.com/claus/b5e91bb35f64cd616b191cbf310387d1

Maybe it helps someone.

[trusktr]

I think this would indeed make it easier for some cases, while still allowing those who need control to make their own loops.

I'm thinking that perhaps

• Group would be in charge of making the rAF loop (given the user opts-in with new API, so current behavior stays the same, at least until we swap the behavior in a breaking release).
• When Group has tweens to update, it starts a loop.
• When the Group has no Tweens to update, it stops the loop.

[trusktr]

Maybe we can overload the start method, so that if it is passed a boolean then it signifies whether a loop should automatically be used (defaulting to false until a breaking release):

tween
  .to(...)
  .start(true) // Causes its associated Group to use a loop

in a breaking change, we can change it to true by default, and people could opt-out:

tween
  .to(...)
  .start(false) // don't use a loop, we'll call `update` manually.

[trusktr]

I think a better API would be to not override start(), and make it an option for the Tween.

const tween = new Tween({}, {duration: 1000, autoLoop: true})
  .start() // starts the loop (or uses its group's loop if in a group)

// ...later
tween.stop() // stops the loop