Designing Animations

Designing a Clip

The first step is to decide what you want to see in a clip, that is what is the performance to be. This gives the performer and its animation.

In this game clip a box, the performer, is to slide between two places once every second. The box will be able to be viewed from any angle.

The first stage design is to sketch what is needed at key time points, a little like an animated gif design.

After one second the box should be in its new position and one second later in its start position. This sequence is then continually repeated.

In Babylon.js the Animation is changing the position of the box along the x axis and its x position is a floating point number and

the animation should loop. In code the animation which slides an item in the x direction becomes

const frameRate = 10;
const xSlide = new BABYLON.Animation("xSlide", "position.x", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

The key frames are at 0, 1 and 2 seconds. To find the frame number after t seconds multiply the time by the frame rate, i.e. t x frameRate.
In this case the key frames are at frame numbers, 0, 1 x frameRate and 2 x frame Rate.

Starting the box at x = 2 and sliding it to x = -2, gives the x positional values of the box after 0, 1 and 2 seconds as 2, -2 and 2 respectively.

The key frames are set into an array of JavaScript objects with properties for frame (number) and value and added to the animation, as in

const keyFrames = [];
keyFrames.push({
    frame: 0,
    value: 2,
});
keyFrames.push({
    frame: frameRate,
    value: -2,
});
keyFrames.push({
    frame: 2 * frameRate,
    value: 2,
});
xSlide.setKeys(keyFrames);

The animation is now fully made and can be applied to the box

box.animations.push(xSlide);

The performance (Animatable) is started with

scene.beginAnimation(box, [xSlide], 0, 2 * frameRate, true);

You can see the result here