如何

结合动画


如何结合动画

同时

只需设置更多动画并添加到BabylonJS对象的动画数组中。

例如,将旋转动画添加到 非常简单的幻灯片动画中 - -


要得到:

滑动并旋转

var yRot = new BABYLON.Animation("yRot", "rotation.y", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

var keyFramesR = []; 

keyFramesR.push({
   frame: 0,
   value: 0
});

keyFramesR.push({
   frame: frameRate,
   value: Math.PI
});

keyFramesR.push({
   frame: 2 * frameRate,
   value: 2 * Math.PI
});


yRot.setKeys(keyFramesR);

滑动和更快的旋转速度

将旋转值更改为更大的数字会增加旋转速度

var yRot = new BABYLON.Animation("yRot", "rotation.y", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

var keyFramesR = []; 

keyFramesR.push({
   frame: 0,
   value: 0
});

keyFramesR.push({
   frame: frameRate,
   value: 4 * Math.PI
});

keyFramesR.push({
   frame: 2 * frameRate,
   value: 8 * Math.PI
});


yRot.setKeys(keyFramesR);

滑动和改变旋转速率

将第二关键帧位置改变到更靠近帧的末端给出变化的旋转速率。

var yRot = new BABYLON.Animation("yRot", "rotation.y", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

var keyFramesR = []; 

keyFramesR.push({
   frame: 0,
   value: 0
});

keyFramesR.push({
   frame: 1.5 * frameRate,
   value: 4 * Math.PI
});

keyFramesR.push({
   frame: 2 * frameRate,
   value: 8 * Math.PI
});


yRot.setKeys(keyFramesR);

连续动画

为了让一个动画跟随另一个动画,需要在beginDirectAnimation函数中添加另一个参数。此参数本身是一个在beginDirectAnimation结束动画时调用的函数。

实际上需要两个新参数,因为要调用的函数是第六个参数,因此需要填充第五个参数位置。

beginDirectAnimation 和 Parameters

scene.beginAnimation(目标,开始帧,结束帧,循环,速度,动画结束);

  • target - BabylonJS Object,要设置动画的BabylonJS对象

  • animations -应用于目标的所有动画的数组

  • 开始帧 - 数字,开始动画的帧

  • 结束帧 - 数字,结束动画的帧

  • loop - boolean : optional,当要激活动画的循环模式时为true,为仅运行动画时为false

  • speed - number : optional,可选,默认1匹配动画帧速率,较高的数字加速动画,较低的数字减慢速度

  • on animation end - function : optional,可选,动画结束时调用的函数,需要循环为false

例子

以下是幻灯片和旋转的更改 -


在第一个示例中,框旋转5秒钟,然后进入循环幻灯片。

对beginDirectAnimation的代码更改是循环变为false,速度保持为默认值1,函数nextAnimation被调用为第一个结束。

scene.beginDirectAnimation(box, [yRot], 0, 2 * frameRate, false, 1, nextAnimation);

在此之前添加的附加功能

var nextAnimation = function() {
    scene.beginDirectAnimation(box, [xSlide], 0, 2 * frameRate, true);
}

在第二个例子中,当盒子进入环形滑动时,旋转继续。

var nextAnimation = function() {
    scene.beginDirectAnimation(box, [yRot, xSlide], 0, 2 * frameRate, true);
}

进一步阅读

基本

动画分组动画简介
Grouping Animations

高级

一系列动画