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(真);

为了停止 animation.However 它没有停止动画而且仍然运行 animation.How 我可以停止动画吗？

我完全错过了。

我们将不胜感激。

谢谢。

Answer 1

setPaused()方法只改变了Ticker上的paused值，但还是派发了。这可能会在 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
}

javascript 停止动画不起作用

javascript stop animation not working

javascript

jquery

animation

easeljs