how to not create multiple rAF callbacks?

[nickdesaulniers]

So I'm trying to integrate TweenJS into a team project. My PR is getting rejected because TweenJS creates multiple rAF callbacks per frame, as opposed to one single rAF callback per frame. I was wondering if that use case is supported? I think the useTicks options and tick method would do it, but it doesn't seem to animate correctly? I couldn't find any examples of how I might support that use case (but would be happy to send a PR with a new example once I figure it out). Is it possible for me to disable the Ticker class from creating multiple rAF calls, and instead be able to pass the time delta from my single rAF callback into a tween instance?

[nickdesaulniers]

I suppose I could just use Ease, and stretch the range from [0, 1], but I suppose this would be duplicating work Tween already does.

[gskinner]

Ticker should only create a single RAF call. Are you hoping to remove that and replace it with an existing one? If so, to what end?

[nickdesaulniers]

I see the issue as, per frame, there's then 2 rAF callbacks:

rAF(fnFromMyApplication) rAF(TweenJSTickerCB)

vs

rAF(fnFromMyApplicationThatCallsTweenJSTickerUpdateFn)

[gskinner]

Why is that a concern, specifically? If its performance, you may be worrying about nothing. Its good to avoid lots of RAF subscribers (ex. subscribing every sprite in a particle engine), but the impact of 2 subscribers vs 1 is probably not measurable.

Also, is there a reason your application can't simply use Ticker directly? It is design to act as the heartbeat for interactive experiences:

createjs.Ticker.on("tick", myApplication.tick, myApplication);

You can even use the once param to mimic an RAF-type subscription model:

createjs.Ticker.on("tick", myApp.tick, myApp, true); // only listen once

myApp.tick = function(evt) {
   // do some stuff.
   if (needsRAF) {
      createjs.Ticker.on("tick", this.tick, this, true);
   }
}

[nickdesaulniers]

If its performance, you may be worrying about nothing. Its good to avoid lots of RAF subscribers (ex. subscribing every sprite in a particle engine), but the impact of 2 subscribers vs 1 is probably not measurable.

I agree, but my team mates won't let me check in code that that is using multiple rAF callbacks per frame. I was simply trying to see if TweenJS supported such a use case.

[gskinner]

No offense to your team mates, but they should focus on pragmatic vs ideological development. Its easy to get distracted by absolutes ("no more than one RAF callback"), and lose sight of realities ("we need to ship this").

Ignoring philosophy, one other option, which may be easier in your case is to drive Tween without using Ticker. Either leave Ticker out of your JS (Tween will only use it if it is available), or unsubscribe Tween from it. You can then tick Tween manually.

createjs.Ticker.removeEventListener("tick", createjs.Tween);
createjs.Ticker.reset(); // prevents RAF subscription
// ...
function appRAFHandler() {
   // do stuff.
   createjs.Tween.tick(delta, paused);
}

See the docs for Tween.tick for more info.

[nickdesaulniers]

That's sage advice; thanks for your thoughts on the matter, and the code example!