结合EaselJS和TweenJS逐渐淡出

Question

我有一个只使用EaselJS加载和显示图像的工作动画.整个动画效果很好,但图像立即出现和消失.我希望它们随着时间的推移逐渐消失.这是一个可以更好地说明问题的小jsfiddle: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();
});

当您单击红色圆圈时,它会立即消失.我希望它能慢慢消失.我做了一些研究,但我找不到好的文档 - 看来我需要的是TweenJS"姐妹"库,至少有以下一些代码:

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

我相信最后一行应该是我之前制作的"形状"对象,然后设置一个动画来动画它的alpha属性(我假设在添加到舞台时默认为1,但我不确定) ,并在1000毫秒内将其减少到0.代码实际上没有做任何事情 - 任何帮助将不胜感激!

Answer 1

您需要确保在补间期间或属性更改时更新阶段.

这是使用您的代码的快速小提琴.我在舞台上添加了一个刻度线监听器,它将不断重绘舞台.http://jsfiddle.net/lannymcnie/FVw7E

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

请注意,您可能希望控制添加和删除tick的时间,因此在没有任何更改时不会不必要地重绘阶段.一种快速的方法是call在补间的末尾添加一个.

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

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

干杯.