• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

1.4K

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

Community Expert , 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
...

Votes

Translate

Translate
Community Expert ,
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

Votes

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 🙂

Votes

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 Expert ,
Dec 31, 2019 Dec 31, 2019

Copy link to clipboard

Copied

Nice! You're welcome!

Votes

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 ,
Sep 28, 2021 Sep 28, 2021

Copy link to clipboard

Copied

Hi, What if you want the animation stop at certain frames?

Votes

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
New Here ,
Oct 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

LATEST

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.

Votes

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