Sign in to follow this  
Chrundle

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! 

Share this post


Link to post
Share on other sites

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 ;) 

Share this post


Link to post
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! 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.