javascript停止動畫不起作用

Question

Javascript：

var canvas, stage, exportRoot;

function init() {
    canvas = document.getElementById("canvas");
    exportRoot = new lib.son();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();

    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);

    createjs.Ticker.setPaused(true); // Here should be stopped


}

HTML：

  <div id="loadingPanelDiv" style="position: fixed; z-index: 11111; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255,255,255,1); display: none;">
        <canvas id="canvas" width="600" height="500" style="position: absolute; left: 50%; top: 50%; margin-left: -300px; margin-top: -250px;"></canvas>
    </div>

題：

當我單擊按鈕init（）函數開始運行時。

我使用createjs.Ticker.setPaused（true）;

為了停止動畫。但是它並沒有停止動畫並且仍然運行動畫。我如何停止動畫？

我想念的地方。

任何幫助將不勝感激。

謝謝。

Answer 1

setPaused()方法僅更改Ticker上的暫停值，但仍會分派該值。 這可能會在EaselJS的未來版本中發生變化，但是當前暫停動畫的最佳方法是從舞台上刪除“ tick”偵聽器。

// Pause
createjs.Ticker.removeEventListener("tick", stage);

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

為了使此操作更容易控制，您可以執行以下操作：

// Add the listener to your own function instead of stage
createjs.Ticker.addEventListener("tick", tick);

var paused = false;
function tick(event) {
    if (!paused) {
        stage.update(event);
    }
}

// Then to toggle it, just change the "paused" property.
function handleButtonClick(event) {
    paused = !paused; // toggle on click
}