Pause resume or stop the current running animation

Questions
1

In my app i implemented the animation for camera behaviour using this technique.

BABYLON.ArcRotateCamera.prototype.cameraSpinRotation = function (
  whichprop,
  targetval,
  speed,
  onAnimationEnd = null
) {
  var ease = new BABYLON.CubicEase();
  ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);

  this.currentAnimation = BABYLON.Animation.CreateAndStartAnimation(
    "at4",
    this,
    whichprop,
    speed,
    120,
    this[whichprop],
    targetval,
    0,
    ease,
    onAnimationEnd
  );
 };

In my application i have the button where i run the animation for camera with different value like alpha beta or radius.
So, I want to pause or resume the current running animation using a button click. can anyone tells me what method is used to control the animation behavior?

2

I do it like this:

  const setPause = (shouldPause : boolean) => {
      if(shouldPause === true) {
          animatable.pause();
      }
      else {
          animatable.restart();
      }
  };

Note from future me: Coincidentally, I just ran into a bug (in my code) where I did use AnimationGroup functions incorrectly. If at some point you call AnimationGroup.pause() and later on want to start with AnimationGroup.start(), nothing happens.

tl;dr use pause/restart or start/stop / not tl;dr

1 Like
3

I fixed this problem statement using this

BABYLON.ArcRotateCamera.prototype.currentAnimation = [];
BABYLON.ArcRotateCamera.prototype.pauseAnimation = function () {

  this.currentAnimation.forEach((animation) => {
    animation._paused = true;
  });
};

BABYLON.ArcRotateCamera.prototype.resumeAnimation = function () {
  if (!this.currentAnimation || this.currentAnimation.length === 0) {
    console.error("No animations to resume.");
    return;
  }

  this.currentAnimation.forEach((currentAnim) => {
    currentAnim._paused = false;
  });
};

BABYLON.ArcRotateCamera.prototype.cameraSpinRotation = function (
  whichprop,
  targetval,
  speed,
  onAnimationEnd = null
) {
  var ease = new BABYLON.CubicEase();
  ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);

  const animation = BABYLON.Animation.CreateAndStartAnimation(
    "at4",
    this,
    whichprop,
    speed,
    120,
    this[whichprop],
    targetval,
    0,
    ease,
    onAnimationEnd
  );

  this.currentAnimation.push(animation);
};