Babylon.js教程 第二节 分组动画

	let camera=lightAndCamera()
    let ground=BABYLON.MeshBuilder.CreateGround('ground',
        {width:100,height:100},scene)
    let box=BABYLON.MeshBuilder.CreateBox('box',{width:5,height:3,depth:2},scene)
    const framerate=10
    const up=new BABYLON.Animation('animation','position',framerate,
    BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE)
    const keysFrames=[]
    keysFrames.push({
        frame:framerate,
        value:new BABYLON.Vector3(0,0,0)
    })
    keysFrames.push({
        frame:2*framerate,
        value:new BABYLON.Vector3(10,5,0)
    })
    keysFrames.push({
        frame:4*framerate,
        value:new BABYLON.Vector3(6,10,10)
    })
    up.setKeys(keysFrames)
    let rotation=new BABYLON.Animation('animation','rotation.x',framerate,
    BABYLON.Animation.ANIMATIONTYPE_FLOAT,
    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE)
    const framArr=[]
    framArr.push({
        frame:framerate,
        value:0
    })
    framArr.push({
        frame:2*framerate,
        value:Math.PI
    })
    framArr.push({
        frame:4*framerate,
        value:Math.PI*2
    })
    rotation.setKeys(framArr)
    //scene.beginDirectAnimation(box,[rotation,up],0,4*framerate,true)
    const rote=new BABYLON.Animation('animation','alpha',framerate,
    BABYLON.Animation.ANIMATIONTYPE_FLOAT,
    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE)
    const Frames=[]
    Frames.push({
        frame:framerate,
        value:0
    })
    Frames.push({
        frame:5*framerate,
        value:Math.PI/2
    })
    Frames.push({
        frame:10*framerate,
        value:Math.PI
    })
    rote.setKeys(Frames)
    //scene.beginDirectAnimation(camera,[rote],0,10*framerate,true)
    var animationGrounp=new BABYLON.AnimationGroup('group')
    animationGrounp.addTargetedAnimation(up,box)
    animationGrounp.addTargetedAnimation(rotation,box)
    animationGrounp.addTargetedAnimation(rote,camera)
    animationGrounp.normalize(0,40)
    animationGrounp.play(true)

创建分组使用：

var animationGroup1 = new BABYLON.AnimationGroup("Group1");

然后使用addTargetedAnimation方法将动画与网格链接起来，并将它们添加到组中：

animationGroup1.addTargetedAnimation(animation1, mesh1);
animationGroup1.addTargetedAnimation(animation3, mesh1);
animationGroup1.addTargetedAnimation(animation2, mesh2);

normalize方法：

使用normalize方法使所有动画的帧数相同：

animationGroup2.normalize(0, 40);

speedRatio方法：

speedRatio方法可以设置动画组与原动画组的速度比：

animationGrounp.speedRatio=0.5

从现有动画创建组

 可以通过枚举动画表中包含的动画来从动画表中创建新的 AnimationGroup：

var animationGroup = new BABYLON.AnimationGroup("my-animation-group");
for (anim of idleAnim.getAnimations()) {
    animationGroup.addTargetedAnimation(anim.animation, anim.target);
}

onAnimationEndObservable方法：

动画组结束时触发的函数：

animationGroup1.onAnimationEndObservable.add(function() {
  mesh1.material = newMaterial;
});

onAnimationLoopObservable方法：

动画组在循环时触发的函数：

animationGroup1.onAnimationLoopObservable.add(function(targetAnimation) {
  console.log(targetAnimation.animation.name);
});

 onAnimationGroupLoop方法：

所有动画组循环播放时触发的函数：

animationGroup1.onAnimationGroupLoopObservable.add(function(group) {
  console.log("Group looped!");
});