Combining Animations

How To Combine Animations

Concurrent

Simply set up more animations and add them to the Babylon.js object's animations array.

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

Slide and Rotate

import { Animation } from "@babylonjs/core/Animations/animation";
const yRot = new Animation("yRot", "rotation.y", frameRate, Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_CYCLE);
const 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.

import { Animation } from "@babylonjs/core/Animations/animation";
const yRot = new Animation("yRot", "rotation.y", frameRate, Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_CYCLE);
const 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 closer to the end of the frame range gives a varying rotation rate.

import { Animation } from "@babylonjs/core/Animations/animation";
const yRot = new Animation("yRot", "rotation.y", frameRate, Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_CYCLE);
const 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, a further parameter needs to be added to the beginDirectAnimation function. This parameter is itself a function to be called when the animation started by beginDirectAnimation ends.

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

beginDirectAnimation and Parameters

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

• target - BabylonJS Object, the Babylon.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 changes to the slide and rotate example

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

The changes to beginDirectAnimation are that looping becomes false, the speed remains the default 1, and the nextAnimation function is called when the first animation ends.

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

The additional function added before this is

const nextAnimation = function () {
  scene.beginDirectAnimation(box, [xSlide], 0, 2 * frameRate, true);
};

• Rotate Then Slide

In the second example, the rotation continues as the box goes into a looped slide.

const nextAnimation = function () {
  scene.beginDirectAnimation(box, [yRot, xSlide], 0, 2 * frameRate, true);
};

• Rotate Then Rotate and Slide