Combining Animations

Concurrent

Simply set up more animations and add to the BabylonJs object's animations array.

For example adding a rotation animation to the very simple slide animation -

to get:

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

Playground Example Slide and Rotate -

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

Playground Example Slide and Faster Rotate -

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

Playground Example Slide and 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.beginAnimation(target, start frame, end frame, loop, speed, on animation end);

• target - BabylonJS Object, the BabylonJS 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 Slide and Rotate -

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

Playground Example Consecutive Animations 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);
}

Playground Example Consecutive Animations Rotate then Rotate and Slide -

Further Reading

Basic

Introduction to Animating

Advanced

A Sequence of Animations