The Animation Method

Creating the animation

import { Animation } from "@babylonjs/core/Animations/animation";
const myAnim = new Animation(name, property, frames_per_second, property_type, loop_mode);

name - string, name of the animation
property - string, a property of the object that the animation will be applied to. For example a Vector3 property such as position or a floating number property such as light.intensity.
frames per second - number, the number of animation frames per second (independent of the scene rendering frames per second)
property type - number, the property type of the property parameter. This can be set using the following constants:

BABYLON.Animation.ANIMATIONTYPE_COLOR3
BABYLON.Animation.ANIMATIONTYPE_FLOAT
BABYLON.Animation.ANIMATIONTYPE_MATRIX
BABYLON.Animation.ANIMATIONTYPE_QUATERNION
BABYLON.Animation.ANIMATIONTYPE_VECTOR2
BABYLON.Animation.ANIMATIONTYPE_VECTOR3
loop mode - number optional. This can be set using the following parameters:

BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE - Restart the animation from initial value
BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT - Pause the animation at the final value
BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE - Repeat the animation incrementing using key value gradients. In this way, for example, a _clip* showing a character's legs in a walking motion can be looped to show the character progressing across the scene. BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE_FROM_CURRENT - Relative loop mode (add to current value of animated object, unlike ANIMATIONLOOPMODE_RELATIVE) BABYLON.Animation.ANIMATIONLOOPMODE_YOYO - The animation will reverse its direction when it reaches the end instead of restarting from the beginning

Set Key Frames

The key frames of an animation are held in an array of objects, each containing the following two properties:

frame - the frame number
value - for the property being changed

This array will contain one object for each key frame and can contain as many key frames as needed for the desired animation.

const myKeys = [
  {
    frame: 0,
    value: 0.5,
  },
  {
    frame: 60,
    value: 1.0,
  },
];

Once the key frames array is constructed, in this case an array named myKeys, it is added to the animation by setting the keys.

myAnim.setKeys(myKeys);

Beginning The Animation

There are several ways to manage the play state of animations. One of the simplest is to add an animation to the animations array property of an object. Objects like Mesh, Material, Light, or Camera have an animations array property defined by default which holds animations which target that specific object.

myMaterial.animations.push(myAnim);

Additionally, animations can be added to any object that the engine can reach, even if it does not already have an animations array property. Due to the malleable nature of JavaScript, simply declaring a new array property for an object will enable us to store animations on target objects. For example, if we want to target the weight property of an animation with another animation, we can add an animations array property to the animation by declaring it.

myAnimation.animations = [];
myAnimation.animations.push(weightAnimation);

Remember, above we said that anything that the engine can reach can be animated with our animation system. This also applies to content outside of the canvas. For example, since we can reach any DOM object with Javascript, we can apply an animation to it. If we wanted to, we could use an animation to drive the border-radius of a <div> object.

beginAnimation

Now that we have pushed an animation to a target object, starting the animation is a simple case of telling the scene to begin the animations stored with the target object. Note that when beginAnimation is called, every animation stored in the target.animations array will start.

scene.beginAnimation(target, from, to);

target - BabylonJS Object, the Babylon.js object to be animated
from - number, the frame at which to start the animation
to - number, the frame at which to end the animation

If a looping animation is desired, set the fourth parameter to true.

scene.beginAnimation(target, from, to, true);

Basic Sliding Box Animation

There are a number of further optional parameters that you can find in the scene API.

beginDirectAnimation

If it is preferable to not store animations with a target object, one or more animations can be applied to a target using:

scene.beginDirectAnimation(target, animations, from, to, loop);

target - BabylonJS Object, the Babylon.js object to be animated
animations - array, of all the animations to apply to the target
from - number, the frame at which to start the animation
to - number, the frame at which to end the animation
loop - boolean, optional, default false, when true repeats the animation

Be aware that animations applied with scene.beginDirectAnimation do not belong to any object or the scene, so the scene is not aware of them and they do not register in scene.animations. However, this method is extremely useful for applying a one-time animation to an object or for animating an object that does not have an animations array property if it is desirable not to alter the target object. Further optional parameters are available and can be found in the scene API. If scene.beginDirectAnimation is the preferable method, but additionally having a reference to the animation that can be used in the future is required, an Animatable is exactly what is needed.

Sliding Box Direct Animation

Animatable

Both scene.beginAnimation and scene.beginDirectAnimation return an Animatable object that can be referenced when needed to change the state of the animation. Simply capture the return from one of the methods above to store the reference.

const myAnimatable = myscene.beginAnimation(target, from, to, true);

Once the animatable is stored, any of the following methods can be called to change the state of the animation as needed.

pause()
restart()
stop()
reset()

Box animation stop after 5 secs