在easelsjs做一个简单的过渡

Question

我使用的是easelsjs，我需要做一个简单的过渡。 只是逐渐改变舞台的不透明度。 我使用了alpha属性和Ticker，但我没有看到转换，只看到它的最后阶段。 有一个简单的例子吗 - 我试着看但是找不到

Answer 1

我不知道您是否要更改舞台不透明度或形状不透明度，但如果您希望整个画布的不透明度较低，则只需使用JavaScript + CSS过渡即可。在这种情况下不需要EaselJS。

但是如果你想在画布对象上创建alpha转换，你应该看看TweenJS，它会大大简化动画过程。

此外，如果您只想继续使用EaselJS（或使用TweenJS），您需要正确实施自动收报机，这里是我创建自动收报机功能的方法：

createjs.Ticker.on("tick", tick);
createjs.Ticker.setFPS(60); // This will call the tick() function at every 1000/60ms

function tick() {
    stage.update();
}

然后，您需要说明您的按钮何时被点击到您的自动收报机功能，因此它可以每帧减少您的对象的alpha值。我强烈建议使用TweenJS而不是这样做（我在这个答案的最后部分进行了TweenJS演示）：

$(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();
    }
});

---

我也简化了你的代码。以下是Click事件处理程序中的代码如何使用TweenJS查看：

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

_{请注意，EaselJS和TweenJS一起工作 。}