Babylon.js 第四节 高级动画方法

使用 Promise 等待动画结束：

    setTimeout(async () => {
        var anim = scene.beginAnimation(box1, 0, 100, false);
        await anim.waitAsync();
    });

使用扩展函数创建动画：

BABYLON.Animation.CreateAndStartAnimation("boxscale",
    box, "scaling.x", 10, 30, 1.0, 3);

该函数立即执行，只有两个关键帧，开始和结束。

点击混合动画：

    var runtimeAnimation;
    scene.onPointerDown = function (evt, pickResult) {
        if(pickResult.pickedMesh.name=='box'){
            scene.stopAnimation(box);
            runtimeAnimation = scene.beginDirectAnimation(box,
            [rotation], 0, 100, true);
        }
	};

当鼠标点击box的时候，就会暂停所有动画，执行rotation动画。

动画权重

启动具有特定权重的动画。可以在同一目标上同时运行多个动画。最终值将是基于权重值加权的所有动画的混合。例如：

    let ground=BABYLON.MeshBuilder.CreateGround('ground',
        {width:100,height:100},scene)
    let box=BABYLON.MeshBuilder.CreateBox('box',
        {width:5,height:3,depth:2},scene)
    ground.material=newMaterial(options1)
    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,10,0)
    })
    keysFrames.push({
        frame:2*framerate,
        value:new BABYLON.Vector3(-50,10,0)
    })
    keysFrames.push({
        frame:4*framerate,
        value:new BABYLON.Vector3(-50,10,-50)
    })
    up.setKeys(keysFrames)
    box.animations.push(up)
    //混合动画
    var runAnim1 = scene.beginWeightedAnimation(box, 0, 20, 1, true,0.5);
    var runAnim2 = scene.beginWeightedAnimation(box, 21, 40, 1, true,0.5);
    //同步动画
    runAnim1.syncWith(runAnim2)

在使用beginWeightedAnimation方法混合动画之后，需要使用syncWith方法来同步动画。加权值可以通过weight属性来改变，例如：

runAnim1.weight=0.5

beginWeightedAnimation方法的参数，第一个是网格对象，第二三个是动画的起始和结束帧，第四个是加权值，true代表动画循环。如果要禁用动画同步，只需添加如下代码：

animation.syncWith(null)

与此同时可以指定box动画的子动画通用属性：

var overrides = new BABYLON.AnimationPropertiesOverride();
overrides.enableBlending = true;
overrides.blendingSpeed = 0.1;
box.animationPropertiesOverride = overrides;

缓动函数

缓动函数用于向动画添加行为，可用的缓动函数：

• BABYLON.CircleEase()
• BABYLON.BackEase(amplitude)
• BABYLON.BounceEase(bounces, bounciness)
• BABYLON.CubicEase()
• BABYLON.ElasticEase(oscillations, springiness)
• BABYLON.ExponentialEase(exponent)
• BABYLON.PowerEase(power)
• BABYLON.QuadraticEase()
• BABYLON.QuarticEase()
• BABYLON.QuinticEase()
• BABYLON.SineEase()
• BABYLON.BezierCurveEase()

使用EasingMode属性来更改缓动函数的行为方式，EasingMode 提供三个可能的值： 

• BABYLON.EasingFunction.EASINGMODE_EASEIN：插值遵循与缓动函数相关的数学公式。
• BABYLON.EasingFunction.EASINGMODE_EASEOUT：插值遵循 100% 插值减去与缓动函数相关的公式的输出。
• BABYLON.EasingFunction.EASINGMODE_EASEINOUT：插值在动画的前半部分使用 EaseIn，在后半部分使用 EaseOut。

 实例：

let torus=BABYLON.Mesh.CreateTorus('t',10,1,100,scene)
var animationTorus = new BABYLON.Animation("torusEasingAnimation",
"position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
var nextPos = torus.position.add(new BABYLON.Vector3(-80, 0, 0));
var keysTorus = [];
keysTorus.push({ frame: 0, value: torus.position });
keysTorus.push({ frame: 120, value: nextPos });
animationTorus.setKeys(keysTorus);
var easingFunction = new BABYLON.QuarticEase()
easingFunction.setEasingMode();
animationTorus.setEasingFunction(easingFunction);
torus.animations.push(animationTorus);
scene.beginAnimation(torus, 0, 120, true);

还可以向动画添加事件

    var event=new BABYLON.AnimationEvent(
        40,
        function (){alert('hello')},
        true,
    )
    up.addEvent(event)