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)
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 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()