Animations

Babylon.js provides powerful tools for creating animations within 3D scenes. These animations can be used for a variety of purposes, such as animating meshes, cameras, lights, materials, and even entire scenes.

Basics

An animation in Babylon.js allows you to modify an object’s properties over time. Common properties to animate include position, rotation, scale, and material properties. Babylon.js provides a robust animation system that works with keyframes, letting you specify how these properties change at defined moments.

To create an animation in Babylon.js, you typically define the following:

Name: The name of animation.
Property: The specific property you want to animate (e.g., position, rotation, scale).
Frames per second (FPS): The number of animation frames per second (ndependent of the scene rendering frames per second).
Property type: The property type of the property parameter. This can be set using the following constants:
- ANIMATIONTYPE_COLOR3 (for color animations)
- ANIMATIONTYPE_FLOAT (for scalar values like opacity)
- ANIMATIONTYPE_MATRIX (for matrix transformations)
- ANIMATIONTYPE_QUATERNION (for rotations)
- ANIMATIONTYPE_VECTOR2 (for 2D vectors)
- ANIMATIONTYPE_VECTOR3 (for 3D vectors).

Loop Mode: This can be set using the followint parameters:

TYPE	DESCRIPTION
`ANIMATIONLOOPMODE_CYCLE`	Restarts the animation from the beginning when it reaches the end..
`ANIMATIONLOOPMODE_CONSTANT`	Pauses the animation at its final value.
`ANIMATIONLOOPMODE_RELATIVE`	Repeats the animation with incremental changes (e.g., character walking across a scene).
`ANIMATIONLOOPMODE_RELATIVE_FROM_CURRENT`	Adds changes to the current value, instead of looping from the start (unlike ANIMATIONLOOPMODE_RELATIVE).
`ANIMATIONLOOPMODE_YOYO`	Reverses the direction of the animation at the end instead of restarting.

Once the animation is created, you define the keyframes, which specify the values of the property at specific times. Keyframes allow you to control how the property transitions between different values during the animation. Finally, the animation is added to the animations array of the target object.

Now that we’ve covered the theory behind animations, let’s apply all of these concepts in the following example and starting animation by beginAnimation method from the scene object.

const frameRate = 60;
const xSlideAnimation = new Animation("xSlide", "position.x", frameRate/2, Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_CYCLE);
const keyFrames = [
    { frame: 0, value: 2 },
    { frame: frameRate, value: -2 },
    { frame: frameRate * 2, value: 2 }
]; 
xSlideAnimation.setKeys(keyFrames);
 
const scene = useScene();
const boxRef = useRef<Mesh>(null);
 
useEffect(() => {
    scene.beginAnimation(boxRef.current, 0, frameRate * 2, true)
}, []);
 
// ...
 
<box ref={boxRef} animations={[xSlideAnimation]} name="box" positionX={2} />

Animations Group

Animations group allows you to group several animations and control them together. This is useful for complex animations involving multiple objects or properties.

Let’s add an animation that rotates the box from the previous example around the Y-axis. In the following example, we use an animation group to trigger both animations on the box simultaneously.

const frameRate = 60;
const xSlideAnimation = new Animation("xSlide", "position.x", frameRate / 2, Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_CYCLE);
xSlideAnimation.setKeys([
    { frame: 0, value: 2 },
    { frame: frameRate, value: -2 },
    { frame: frameRate * 2, value: 2 }
]);
 
const yRotationAnimation = new Animation("yRotation", "rotation.y", frameRate / 2, Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_CYCLE);
yRotationAnimation.setKeys([
    { frame: 0, value: Tools.ToRadians(0) },
    { frame: frameRate, value: Tools.ToRadians(180) },
    { frame: frameRate * 2, value: Tools.ToRadians(360) }
]);
 
const boxRef = useRef<Mesh>(null);
useEffect(() => {
    const animationGroup = new AnimationGroup("animation-group");
    animationGroup.addTargetedAnimation(xSlideAnimation, boxRef.current);
    animationGroup.addTargetedAnimation(yRotationAnimation, boxRef.current);
    animationGroup.normalize(0, frameRate * 2);
    animationGroup.play(true);
}, []);
 
// ...
 
<box ref={boxRef} animations={[xSlideAnimation]} name="box" positionX={2} />

Learn More

For more animations methods and additional context, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/animation/.

Earcut Actions