Jump to content

How to update a running animation?


Recommended Posts

First post! :)

I want to animate an object's position based on input from the user's mouse wheel. The mouse wheel can fire events many times per second. I don't want to destroy the old animation, and create a new one, for each of these many events. I'd prefer to "update" the keyframes of the existing animation instead (i.e. continue the animation from its current frame and position, to a new endPosition at a new keyframe). I'd also like to "restart" the animation again from its current value, if it happens to reach the final keyframe and stop, then the user scrolls again later. 

What is the preferred way to "update" an animation in Babylon.js? Can I just use animation.setKeys() again to update the keyframes? Also, if the animation completes, then more scroll events are fired later: how can I "restart" the animation from its previous end position, and trigger it to run again to a new end position? 

Thank you so much in advance for your help! 

Link to comment
Share on other sites

  • Chrundle changed the title to How to update a running animation?

Heya @Chrundle, interesting project.

Anyway, I am not aware of any "pretty" solution so here is how I would do it:

Normal Animation:

scene.beginAnimation(myAnimatedMesh, 0, 120, true, 1);

Simple and sweet. This runs the animation from frame 0 to 120 and loops it.

Manual Animation:

let frameFrom = 0;
let frameTo = 1;
let lastFrame = 120;
let frameAdvance = 1;
let isRunning = false;

function executeFrame() {
   if(!isRunning) {
     isRunning = true;
     scene.beginAnimation(myManuallyAnimatedMesh, frameFrom, frameTo, false, 1, function() {
      if(frameTo < lastFrame) {
        frameFrom = frameTo;
        frameTo += frameAdvance;
      } else {
        frameFrom = 0;
        frameTo = 1;
      isRunning = false;

With this, you can adjust how many frames each "executeFrame" can play and loop at the end. I haven't tested it but it shouldn't be too far from the working version ;) 

Link to comment
Share on other sites

Hi Nesh, 

Thanks so much for your help! Your solution definitely solves the issue of controlling the number of frames / looping of the animation. 

However, I'm still confused on how to update the keyframes of the animation WHILE it is running. (Ex. if the user scrolls the mouse wheel again while the first animation is still running.) Should I just use setKeys() again? Or retrieve the existing keys with getKeys(), then update their values? Or is there a better way? 

Thanks again for your 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.

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.


  • Recently Browsing   0 members

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