Jump to content

How to enqueue multiple user-triggered animations ?


digEmAll
 Share

Recommended Posts

Hi All,

I am new to this forum so I hope I didn't break any rule writing my question here...

My problem is probably trivial but I'm not sure how to implement it correctly.

Basically I have a project where users can trigger some 90° box rotations (implemented as animations) by clicking on a button.

Rotations work as expected, but problems arise when user clicks multiple times before previous rotations have completed. In this case, obviously, the following rotations start while the box is in the middle of previous movements therefore the final position of the box is not a multiple of 90° with respect to the initial position.

I made a playground example to reproduce the problem: http://babylonjs-playground.com/#1NSSHK#0

I think I should use the callback function of the rotation, but I'm not sure how (I'm pretty new to javascript...)

 

Thanks in advance

 

 

 

 

Link to comment
Share on other sites

Hi there digEmAll and welcome to the forum.

How about something like that: http://babylonjs-playground.com/#1NSSHK#1

The idea is not to add to the current rotation but to the current target rotation. This way the clicks still add up. Does it work for you like that? Alternatively you could try to prevent another click if the animation is already in progress, should be easy, too. Maybe something like that: http://babylonjs-playground.com/#1NSSHK#2

Link to comment
Share on other sites

Thanks iiceman for your solutions, but I don't want to disable the button because user should be able to create a "chain" of rotations, and I can't use the first solution as well because that means the second (or third, forth.. ) rotation will start before the end of the previous.

Probably I oversimplified my example, but basically in the real case, box can rotate by 90° in different directions (around x, y or z) and different rotations cannot be "combined", but only "chained".

My quick'n'dirty solution is to use an array as rotations queue, as shown here :  http://babylonjs-playground.com/#1NSSHK#3

but I'm not expert enough in javascript to be sure this approach is safe.

For example, is there a risk for a stack overflow due to the recursion?

Are the operations "atomic" enough such that I'm sure that nothing can happen between the status boolean change and the status boolean check ?

Thanks again :)

 

 

 

 

Link to comment
Share on other sites

37 minutes ago, digEmAll said:

 

Are the operations "atomic" enough such that I'm sure that nothing can happen between the status boolean change and the status boolean check ?

 

Haven't checked the demo (on mobile), just wanted to comment on the last question you had - JavaScript is single threaded, all operations are technically atomic. You just need to sort your code correctly :-)

Oh, and this is totally the right place for this question. Especially with a playground already included ?

Link to comment
Share on other sites

I am no expert either, but I am pretty sure that should work. And as far as I know using a queue is a common approach. I don't believe that something can interfere between the flag change and reading the flag, that happens pretty much right after another as far as I can tell. About the stack overflow: how many clicks do you plan on putting in the queue? :D 

I found this on... well, stackoverflow: 

http://stackoverflow.com/questions/2805172/what-are-the-js-recursion-limits-for-firefox-chrome-safari-ie-etc

http://stackoverflow.com/questions/7826992/browser-javascript-stack-size-limit

Maybe you can limit your queue to 1000 items or something like that to be on the save side? But who would be clicking a 1000 times on a rotate button? ;)

 

Link to comment
Share on other sites

4 hours ago, iiceman said:

I am no expert either, but I am pretty sure that should work. And as far as I know using a queue is a common approach. I don't believe that something can interfere between the flag change and reading the flag, that happens pretty much right after another as far as I can tell. About the stack overflow: how many clicks do you plan on putting in the queue? :D 

I found this on... well, stackoverflow: 

http://stackoverflow.com/questions/2805172/what-are-the-js-recursion-limits-for-firefox-chrome-safari-ie-etc

http://stackoverflow.com/questions/7826992/browser-javascript-stack-size-limit

Maybe you can limit your queue to 1000 items or something like that to be on the save side? But who would be clicking a 1000 times on a rotate button? ;)

 

Thanks, for the research :)

Actually these "rotations" might happen also programmatically, so it's easier to reach a greater number than user-clicked only, anyway I don't think I would never reach 100 times. :D

Thanks to all for the help ! :)

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...