Copy link to clipboard
Copied
I have a 360 ° animation frame by frame, to control it I created two button to allow to play the animation in one direction or in the other. The problem is that I haven't found a way to play an animation backwards in HTML Canvas. I tested several codes but none were functional. Would anyone have the most optimized solution for playing an animation backwards.
Hi.
Place this code in the first frame of the main timeline and it should do what you want.
var root = this;
var prev = root.prevButton; // change the prev button instance name here
var next = root.nextButton; // change the next button instance name here
root.start = function()
{
root.loop = -1; // change to 0 to prevent looping
root.direction = 0; // play direction
root.stop();
prev.on("click", root.playBackwards);
next.on("click", root.playForward);
createjs.Ticker.on("tick", root.tic
...
Copy link to clipboard
Copied
Hi.
Place this code in the first frame of the main timeline and it should do what you want.
var root = this;
var prev = root.prevButton; // change the prev button instance name here
var next = root.nextButton; // change the next button instance name here
root.start = function()
{
root.loop = -1; // change to 0 to prevent looping
root.direction = 0; // play direction
root.stop();
prev.on("click", root.playBackwards);
next.on("click", root.playForward);
createjs.Ticker.on("tick", root.tickHandler);
};
root.playBackwards = function()
{
root.direction = -1;
};
root.playForward = function()
{
root.direction = 1;
};
root.tickHandler = function()
{
if (root.loop !== 0 && root.direction === -1 && root.currentFrame === 0)
root.gotoAndStop(root.totalFrames - 1);
root.gotoAndStop(root.currentFrame + root.direction);
};
if (!root.frame0Started)
{
root.start();
root.frame0Started = true;
}
Please let me know if you have any questions.
Regards,
JC
Copy link to clipboard
Copied
Great Job.
Super it works nickel, thank you very much 🙂
Copy link to clipboard
Copied
Nice! You're welcome!
Copy link to clipboard
Copied
Hi, What if you want the animation stop at certain frames?
Copy link to clipboard
Copied
Hi, This code works great.
But I have a small request that I need this to stop on a certain frame.
Eg - I have - this.stop(); on each 15th frame. Now when I click next or previous it it not stopping at the frames that i have stop code. Please help Thanks in advance.