API

Combining Animations

How To Combine Animations

Concurrent

Simply set up more animations and add to theBabylon.js object's animations array.

For example adding a rotation animation to the very simple slide animtation to get:

Simple Slide Animation

Slide and Rotate

var yRot = new BABYLON.Animation(
  "yRot",
  "rotation.y",
  frameRate,
  BABYLON.Animation.ANIMATIONTYPE_FLOAT,
  BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);


var keyFramesR = [];


keyFramesR.push({
  frame: 0,
  value: 0
});


keyFramesR.push({
  frame: frameRate,
  value: Math.PI
});


keyFramesR.push({
  frame: 2 * frameRate,
  value: 2 * Math.PI
});


yRot.setKeys(keyFramesR);
  • Slide and Rotate Animation

Slide and Faster Rotation Rate

Changing the rotation values to larger numbers increases the rotation rate

var yRot = new BABYLON.Animation(
  "yRot",
  "rotation.y",
  frameRate,
  BABYLON.Animation.ANIMATIONTYPE_FLOAT,
  BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);


var keyFramesR = [];


keyFramesR.push({
  frame: 0,
  value: 0
});


keyFramesR.push({
  frame: frameRate,
  value: 4 * Math.PI
});


keyFramesR.push({
  frame: 2 * frameRate,
  value: 8 * Math.PI
});


yRot.setKeys(keyFramesR);
  • Slide with Faster Rotation

Slide and Varying Rotation Rate

Changing the second key frame position to nearer the end of the frames gives a varying rotation rate.

var yRot = new BABYLON.Animation(
  "yRot",
  "rotation.y",
  frameRate,
  BABYLON.Animation.ANIMATIONTYPE_FLOAT,
  BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);


var keyFramesR = [];


keyFramesR.push({
  frame: 0,
  value: 0
});


keyFramesR.push({
  frame: 1.5 * frameRate,
  value: 4 * Math.PI
});


keyFramesR.push({
  frame: 2 * frameRate,
  value: 8 * Math.PI
});


yRot.setKeys(keyFramesR);
  • Slide with Varying Rotation Rate

Consecutive Animations

In order to have one animation follow another then a further parameter needs to be added to the beginDirectAnimation function. This parameter is itself a function to be called when the animation began by beginDirectAnimation is ended.

In fact two new parameters are needed since the function to be called is the sixth parameter and so the fifth parameter position needs to be filled.

beginDirectAnimation and Parameters

scene.beginDirectAnimation(target, animations, start frame, end frame, loop, speed, on animation end);

  • target - BabylonJS Object, theBabylon.js object to be animated

  • animations - array, of all the animations to apply to the target

  • start frame - number, the frame at which to start the animation

  • end frame - number, the frame at which to end the animation

  • loop - boolean : optional, true when loop mode of the animation is to be activated, false to run animation just once

  • speed - number : optional, default 1 matches animation frame rate, higher numbers speed up the animation, lower numbers slow it down

  • on animation end - function : optional, function called when animation ends, requires loop to be false

Examples

The following are alterations to the slide and rotate example

In the first example the box rotates for 5 seconds then goes into a looped slide.

Code changes to beginDirectAnimation are looping becomes false, speed maintained as default 1, and the function nextAnimation is called as the first ends.

scene.beginDirectAnimation(
  box,
  [yRot],
  0,
  2 * frameRate,
  false,
  1,
  nextAnimation
);

Additional function added before this is

var nextAnimation = function() {
  scene.beginDirectAnimation(box, [xSlide], 0, 2 * frameRate, true);
};
  • Rotate Then Slide

In the second example the rotation is continued as the box goes into a looped slide.

var nextAnimation = function() {
  scene.beginDirectAnimation(box, [yRot, xSlide], 0, 2 * frameRate, true);
};
  • Rotate Then Rotate and Slide