Play in reverse in Animate HTLM Canvas for a 360°

Community Beginner ,
Dec 31, 2019 Dec 31, 2019

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.

TOPICS
Code, How to

Views

363

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Dec 31, 2019 Dec 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.tic...

Likes

Translate

Translate
Adobe Community Professional ,
Dec 31, 2019 Dec 31, 2019

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 31, 2019 Dec 31, 2019

Copy link to clipboard

Copied

Great Job.

Super it works nickel, thank you very much 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 31, 2019 Dec 31, 2019

Copy link to clipboard

Copied

LATEST

Nice! You're welcome!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines