CODEWITHSUNDEEP
javascriptjqueryanimationeaseljs
Soner
Soner

Reputation: 1282

javascript stop animation not working

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>

Question:

When i click on button init() function starting to run.

i use createjs.Ticker.setPaused(true);

in order to stop animation.However it is not stopping animation and still runs animation.How can i stop animation ?

Where i miss exactly.

Any help will be appreciated.

Thanks.

Upvotes: 0

Views: 734

Answers (1)

Lanny
Lanny

Reputation: 11294

The setPaused() method only changes the paused value on Ticker, but it is still dispatched. This might change in a future version of EaselJS, but currently the best way to pause your animation is to remove the "tick" listener from the stage.

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

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

To make this a little easier to control, you could do something like this:

// 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
}

Upvotes: 2

Related Questions