Grouping Animations
An AnimationGroup
allows you to link together animations and meshes and play them, pause them and stop them as a group.
Forming a Group
Following the tutorial for creating an animation set up one or more animations.
For example having created animation1, animation2 and animation3 and also meshes mesh1, mesh2, mesh3 and mesh4 you can form the following animation groups
var animationGroup1 = new BABYLON.AnimationGroup("Group1");var animationGroup2 = new BABYLON.AnimationGroup("Group2");
and then use the addTargetedAnimation method to link the animations with the meshes and add these to the groups
animationGroup1.addTargetedAnimation(animation1, mesh1);animationGroup1.addTargetedAnimation(animation3, mesh1);animationGroup1.addTargetedAnimation(animation2, mesh2);animationGroup2.addTargetedAnimation(animation2, mesh3);animationGroup2.addTargetedAnimation(animation1, mesh4);animationGroup2.addTargetedAnimation(animation2, mesh4);animationGroup2.addTargetedAnimation(animation3, mesh4);
As the animations may have been created with differing timelines and these have to be aligned using normalize
Normalize a Group
It may be that animation1, animation2 and animation3 have all been created using different numbers of frames. For instance animation1 may go from frame 0 to frame 80, animation2 from frame 0 to 75 and animation3 from frame 0 to frame 100. You can use the normalize method to make the number of frames the same for all animations, as in
animationGroup2.normalize(0, 100);
In general the parameters for normalize are the numbers beginFrame and endFrame.
The beginFrame number must be less than or equal to the smallest begin frame of all animations, for the above examples not greater than 0.
The endFrame number must be greater than or equal to the largest end frame of all animations, for the above examples not less than 100.
Speed Ratio for the Group
The speedRatio for all animations in the group can be set, for example
animationGroup1.speedRatio = 0.25;animationGroup2.speedRatio = 3;
speeding up or slowing down the animation.
Creating a group from existing animatables
You can create a new AnimationGroup from an animatable by enumerating the animations contained in the animatable:
var animationGroup = new BABYLON.AnimationGroup("my-animation-group");for (anim of idleAnim.getAnimations()) {animationGroup.addTargetedAnimation(anim.animation, anim.target);}
Example: - Create AnimationGroup From Animatable
On Group Animation End
There is an onAnimationEnd observable that can be used to trigger a function when the animation ends.
animationGroup1.onAnimationEndObservable.add(function() {mesh2.material = redMaterial;});
On Group Animation Loop
There is an onAnimationLoop observable that can be used to trigger a function when the animation loops.
animationGroup1.onAnimationLoopObservable.add(function(targetAnimation) {console.log(targetAnimation.animation.name);});
There is also an onAnimationGroupLoop observable that can be used to trigger a function when all the animation of the group ahve looped:
animationGroup1.onAnimationGroupLoopObservable.add(function(group) {console.log("Group looped!");});