Pause and Resume Animation Jitters (Not Smooth)

Questions
, ,
1

I have a gltf model which has animation. I turn on the animation like this:

that.animatable = that.scene.beginAnimation(that.logoMesh, 0, that.logoMesh.animations[0]._keys.length, true);

Whenever the mouse is hovering over the model, I stop the animation. Whenever the mouse leave the model, I resume the animation:

//ON MOUSE ENTER
that.logoMesh.actionManager.registerAction(new window.BABYLON.ExecuteCodeAction(window.BABYLON.ActionManager.OnPointerOverTrigger, function (ev) {
    that.stopAnimation();
}));

//ON MOUSE EXIT
that.logoMesh.actionManager.registerAction(new window.BABYLON.ExecuteCodeAction(window.BABYLON.ActionManager.OnPointerOutTrigger, function (ev) {
    that.startAnimation();
}));

....

stopAnimation: function () {
    var that = this;
    that.scene.stopAnimation(that.logoMesh);
    that.pausedFrame = that.animatable.getAnimations()[0].currentFrame;
    console.log(that.pausedFrame);
},
startAnimation: function () {
    var that = this;
    console.log(that.animatable.getAnimations()[0].currentFrame);
    that.scene.animationsEnabled = true;
    that.animatable = that.scene.beginAnimation(that.logoMesh, 0, that.logoMesh.animations[0]._keys.length, true);
    that.animatable.goToFrame(that.pausedFrame);
}

The paused frame from the stopAnimation() is the same as the paused frame from startAnimation(). The problem is when the animation resume from startAnimation() it is somehow resuming from a wrong frame. It looks like jittering

2

this is because you restart from key 0 every time instead of saving current key on stop

1 Like
3

I saved the currentFrame when I stopped the animation.

stopAnimation: function () {
    var that = this;
    that.scene.stopAnimation(that.logoMesh);
    that.pausedFrame = that.animatable.getAnimations()[0].currentFrame; <-- HERE
},

Then when I start the animation again:

startAnimation: function () {
    var that = this;
    that.scene.animationsEnabled = true;
    that.animatable = that.scene.beginAnimation(that.logoMesh, 0, that.logoMesh.animations[0]._keys.length, true);
    that.animatable.goToFrame(that.pausedFrame); <-- HERE
}

I jumped to the last frame. Actually, I am not sure if this is the correct way of resuming the animation. Please advice.

4

Ok gotcha!

well that should work :slight_smile:
can you repro in the PG so we can see it live?

1 Like
5

@Deltakosh, here is my PG. I tried animatable.pause() or engine.stopRenderLoop() all produce the same result.

6

Here we are boss: stop resume animation | Babylon.js Playground (babylonjs-playground.com)

2 Likes
7

@Deltakosh Thank you sir!

1 Like