createjs optimizing canvas redraws

Question

As I understand it, I have two methods for controlling canvas redraws so they aren't simply running constantly when nothing is animating.

Set up a function that checks a condition:

createjs.Ticker.addEventListener("tick", tick);
var redrawOn = false;
function tick(event) {
    if (redrawOn) {
        stage.update(event);
    }
}

Or, listen for the 'change' event of a tween object and redraw the stage on that event:

var myTween = createjs.Tween.get(resetButton).to({'alpha': 1}, 500);
myTween.on('change', function(){
    stage.update();
});

They both seem tedious but the second one seems easier. Is one more performant than the other? If the second one is, is there a way to simply extend the Tween class to just always does this? Why wouldn't this already be the case?

EDIT: basically I'm trying to avoid doing this:

createjs.Ticker.addEventListener("tick", stage);

Because I read its bad. SO, I have several applications using this and now I'm trying to turn on and off the redraw during tick and its getting to be a real mess... Because of the interactivity, some functions are turing the tick->redraw off while other animations are not finished. Its a nightmare.

Answer 1

If you have one tween going on, then updating the stage when it changes makes sense, but if you have more than one, you are going to end up with extra updates that aren't necessary.

It might make sense to combine your two approaches, and set the redrawOn to true in the tween change, and then update the stage on tick when this value is set.

favorite As I understand it, I have two methods for controlling canvas redraws so they aren't simply running constantly when nothing is animating.

Set up a function that checks a condition:

createjs.Ticker.addEventListener("tick", tick);
var redrawOn = false;
function tick(event) {
    if (redrawOn) {
        stage.update(event);
    }
    redrawOn = false;
}

var myTween = createjs.Tween.get(resetButton).to({'alpha': 1}, 500);
myTween.on('change', function(){
    redrawOn = true;
});

Regarding a general stage ticker, it can be bad, but isn't inherently bad. Updating the stage once every tick makes sense if your app changes a lot, or has a lot of complexity. There are way better ways to optimize your application than to remove the stage tick. For example, caching complex content, using SpriteSheets, reducing Graphic complexity, etc.

Hope that helps.