Remove/Restart Ticker

Question

Hello,

I am creating a canvas animation that I want to restart. I am using the ticker and have tried numerous was to remove/restart it, but it continues to increment no matter what I do.

Here is how I initialize it:

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

createjs.Ticker.setFPS(24);

console.log(createjs.Ticker.getTicks());

in my restart function, I do this, but have tried numerous ways:

createjs.Ticker.removeAllEventListeners();

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

console.log(createjs.Ticker.getTicks()); //When I output this, it just picks up where it left off even though I remove it.

Please note that I do not want to pause it. I would like it to start again from 0 when I restart.

As always, any insight is much appreciated!

ClayUUID · Accepted Answer

Ok, so the key issue that I was having with the ticker speed is that it was basically getting re initialized every time I "rewind" using gotoAndPlay(0);

To remedy this problem, I put the ticker inside of this function so that the listener is only added when the window is initialized. My slider (or timeline scrubber) is now in sync with the animation on the timeline.

if (!window.iHaveBeenInitialized) {

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

createjs.Ticker.setFPS(24);

useTicks = true;

}

function handleTick(event) {

if(sliderBtn.x >= bounds.x && sliderBtn.x <= 700){

sliderBtn.x = sliderBtn.x + (bounds.width/theTotalFrames);

}

I'm going to say again that doing it that way is wrong. Incrementing the position of the slider every tick is an incredibly brittle solution that only works when the timeline is playing. Stopping, pausing, or rewinding the timeline completely breaks it. A proper solution that doesn't have any of those problems would look more like this:

function handleTick() {

sliderBtn.x = bounds.x + bounds.width * (exportRoot.currentFrame / exportRoot.totalFrames);

}

The sort of thing you're trying to do is the very reason the currentFrame property exists, so people don't have to resort to ugly hacks to sync code-based animation with the timeline.

Also, there's no reason to include setFPS in your initialization function, since the FPS is already automatically set to the stage frame rate. And I'm pretty sure "useTicks = true" doesn't do anything. There is no global variable "useTicks".

ClayUUID · Answer

30 seconds of Googling...EaselJS v0.8.2 API Documentation : Ticker - resetEaselJS v0.8.2 API Documentation : Ticker - initI don't know why you'd think removing event listeners from the Ticker would stop it. Events happen regardless of whether they're being listened for.That being said, I'm doubtful that resetting the ticker will accomplish what you think it will. I kind of hope it doesn't, because messing with the global ticker sounds like a horrible hack.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded