CODEWITHSUNDEEP
javascripthtmlanimationeaseljstween
Jake
Jake

Reputation: 3350

Combining EaselJS and TweenJS for Fade Over Time

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!

Upvotes: 4

Views: 4426

Answers (1)

Lanny
Lanny

Reputation: 11294

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.

Upvotes: 5

Related Questions