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_VECTOR3loop mode - number optional, This can be set using the following Parameters
BABYLON.Animation.ANIMATIONLOOPMODECYCLE - 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 having the 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, the BabylonJS object to be animated
- from - number, the frame at which to start the animation
- end frame - number, the frame at which to end the animation
When you want the animation to loop you and true as the fourth parameter
scene.beginAnimation(target, from, to, true)
The are a number of further optional parameters than you can find in the scene API
You can apply several animations to a target using
scene.beginAnimation(target, animations, from, to, loop)
target - BabylonJS Object, the BabylonJS 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 thee animation
Further optional parameters are available and can be found at the scene API
Sliding Box Direct AnimationAnimatable
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()