The Animation Method

Creating the animation

const myAnim = new BABYLON.Animation(name, property, frames per second, property type, loop mode)
  • name - string, name of 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 position.x

  • 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.

Set Key Frames

This is an array, myKeys of objects. Each object has the following two properties:

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

Once constructed this is added to the animation.

myAnim.setKeys(myKeys);

Beginning The Animation

To run the animation it is pushed onto the animations array property of the mesh

mesh.animations.push(myAnim)

and started with these required parameters

scene.beginAnimation(target, from, to);
  • target - BabylonJS Object, theBabylon.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 you want the animation to loop, 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.

You can apply several animations to a target using:

scene.beginDirectAnimation(target, animations, from, to, loop)
  • target - BabylonJS Object, theBabylon.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

Further optional parameters are available and can be found at the scene API.

Sliding Box Direct Animation

Animatable

Both methods of starting an animation return an Animatable object

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

which supports the following methods

  • pause()
  • restart()
  • stop()
  • reset()
Box animation stop after 5 secs