easeljs - make a simple transition in easelsjs -

easeljs - make a simple transition in easelsjs -

i'm using easelsjs , need create simple transition. alter opacity of stage gradually. i'm using alpha property , ticker don't see transition lastly stage of it. there simple illustration - tried couldn't find

i don't know if want alter stage opacity or shape opacity, if want entire canvas have less opacity, can utilize javascript + css transitions it. no need easeljs in case.

but if want create alpha transitions on canvas objects should take @ tweenjs, simplifies animation process lot.

also, if want go on using easeljs (or tweenjs), you'll need implement ticker properly, here's how create ticker function:

createjs.ticker.on("tick", tick); createjs.ticker.setfps(60); // phone call tick() function @ every 1000/60ms function tick() { stage.update(); }

and you'll need when button clicked ticker function, can decrease object's alpha every frame. highly recommend using tweenjs instead of doing (i've set tweenjs demonstration @ end of answer):

$(document).ready(function () { var stage = new createjs.stage(canvas); var s = new createjs.shape(); s.graphics.beginstroke("#f00").beginfill("#ff0000").drawrect(150.5, 100.5, 300, 300); stage.addchild(s); $("#d").click(function () { s.fadeout = true; }); // tick: createjs.ticker.on("tick", tick); createjs.ticker.setfps(60); function tick() { if(s.fadeout){ s.alpha -= 0.01; s.fadeout = (s.alpha > 0.4); } stage.update(); } });

i've simplified code little bit too. here's how code within click event handler using tweenjs:

createjs.tween.get(s).to({alpha: 0.4},1000);

note both easeljs , tweenjs work together.

easeljs