Skip to main content
Participant
December 31, 2019
Answered

Play in reverse in Animate HTLM Canvas for a 360°

  • December 31, 2019
  • 1 reply
  • 1921 views

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.

This topic has been closed for replies.
Correct answer JoãoCésar17023019

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

1 reply

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
December 31, 2019

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

Participant
December 31, 2019

Great Job.

Super it works nickel, thank you very much 🙂

JoãoCésar17023019
Community Expert
Community Expert
December 31, 2019

Nice! You're welcome!