Combining EaselJS and TweenJS for Fade Over Time

Question

I have a working animation that uses only EaselJS to load and display images. The whole animation works quite well, but images appear and disappear immediately. I would like them to fade in and out over time. Here's a small jsfiddle that might illustrate the problem better: http://jsfiddle.net/tNLyx/

var stage = new createjs.Stage("canvas");
var shape = new createjs.Shape(new createjs.Graphics().f("#f00").dc(0,0,100)).set({x:100,y:100});
stage.addChild(shape);
stage.update();

shape.addEventListener("click", function(){
     //Shape will now disappear quickly. I would like it to fade out, by tweening its alpha or opacity or something. Any help would be greatly appreciated!
     stage.removeChild(shape);
     stage.update();
});

When you click the red circle, it simply disappears, immediately. I would like it to fade out slowly. I have done some research but am having trouble finding good documentation - it appears that what I need is the TweenJS "sister" library, and at least some of the following code:

createjs.Ticker.setFPS(30); //Sets frames-per-second for TweenJS
createjs.Tween.get(shape).to({alpha: 0},1000);

I believe the last line is supposed to get the "shape" object which I made previously, then set up an animation which animates its alpha property (which I assume is 1 by default when added to the stage, but I'm not sure), and reduces it to this 0 over 1000 milliseconds. The code doesn't actually do anything - any help would be much appreciated!

I used `alpha` because I believe `opacity` is for use with the CSS Plugin: http://jsfiddle.net/NaA3A/2/ I could be completely wrong though. Have you used this before? — Jake, Apr 25 '14 at 04:12
I think you are just not updating the stage. You need to ensure the stage is updated as the alpha changes. Here is a fiddle using your code. http://jsfiddle.net/lannymcnie/FVw7E/ — Lanny, Apr 25 '14 at 18:42
Lanny, this is perfect! Would you mind adding that as an answer so I can accept it? — Jake, Apr 25 '14 at 21:09

score 5 · Accepted Answer · answered Apr 28 '14 at 16:28

You need to ensure you update the stage during a tween, or whenever a property changes.

Here is a quick fiddle using your code. I added a tick listener to the stage, which will redraw the stage constantly. http://jsfiddle.net/lannymcnie/FVw7E

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

Note that you may want to control when the tick is added and removed, so it isn't unnecessarily redrawing the stage when nothing is changing. A quick way would be to add a call to the end of the tween.

createjs.Tween.get(shape).to({alpha: 0},1000).call(doneAnimating);

function doneAnimating() {
    createjs.Ticker.removeEventListener("tick", stage);
}

Cheers.

Combining EaselJS and TweenJS for Fade Over Time

1 Answers1