1. 创建一个Animation
Js代码:
const myAnim = new BABYLON.Animation(name, property, frames_per_second, property_type, loop_mode)
name : string类型,动画名称
property :string类型,目标对象(Performer)的属性。例如Vector3(如位置)或float属性(如light.intensity)。
frames_per_second :number类型,每秒动画帧数(与场景渲染帧数无关)
property_type :number类型,通过此属性来设置目标对象要变化的参数类型。这可以使用以下常量进行设置:
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类型(可选),可以使用以下参数进行设置:
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE:从初始值重新启动动画
BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT:将动画暂停到最终值
BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE:在循环动画中通过关键点值让动画的值变化。例如,通过这种方式,可以循环显示行走动作中角色的腿,以显示角色在场景中的行走。
BABYLON.Animation.ANIMATIONLOOPMODE_YOYO:动画到达结尾时将反转方向继续执行,而不是从头开始
2. 设置关键帧
动画的关键帧保存在一组对象中,每个对象都包含以下两个属性:
frame:帧编号
value:用于正在更改的属性
该数组将为每个关键帧包含一个对象,并且可以包含动画所需的任意多个关键帧。
const myKeys = [
{
frame: 0,
value: 0.5
},
{
frame: 60,
value: 1.0
}
];
当关键帧数组构建(在本例中为名为myKeys的阵列)后,将通过setKeys方法将其添加到Animation对象中。
myAnim.setKeys(myKeys);
3. 启动动画
有几种方法可以管理动画的播放状态。最简单的方法之一是将动画添加到对象的Animations属性(数组)中。“网格”、“材质”、“灯光”或“摄影机”等对象具有默认定义的Animations属性,该属性持有本对象的动画内容。
myMaterial.animations.push(myAnim);
此外,动画可以添加到引擎可以访问的任何对象中,即使它还没有Animations属性。
由于Javascript的弱对象性,简单地为对象声明一个Animations属性都可以在目标对象上存储动画。例如,如果我们想将动画的权重属性与另一个动画作为目标,我们可以通过声明动画数组属性来将其添加到动画中。
myAnimation.animations = [];
myAnimation.animations.push(weightAnimation);
记住,上面我们说过,引擎可以访问的任何对象都可以用我们的动画系统进行动画制作。这也适用于canvas之外的内容。例如,我们可以使用Javascript访问任何DOM对象,因此我们可以对其应用动画。如果我们愿意,我们可以使用动画来驱动<div>对象的边界半径(border-radius)。
3.1 beginAnimation方法
现在我们已经将动画推送到目标对象,启动动画只需要简单告诉场景Scene开始运行目标对象中存储的动画。请注意,当调用beginAnimation时,存储在target.animations数组中的每个动画都将启动。
scene.beginAnimation(target, from, to);
- target - BabylonJS对象,被设置动画的Babylon.js对象
- from - number类型, 动画开始的帧数
- to - number类型, 动画结束的帧数
如果需要循环动画,请将第四个参数设置为true。
scene.beginAnimation(target, from, to, true);
您可以在场景API中找到许多其他可选参数。
3.2 beginDirectAnimation方法
如果不想存储动画,则可以使用以下方式将若干个动画应用于目标:
scene.beginDirectAnimation(target, animations, from, to, loop);
- target - BabylonJS对象,被设置动画的Babylon.js对象
- animations - 数组,想要执行的所有动画
- from - number类型, 动画开始的帧数
- to - number类型, 动画结束的帧数
- loop - 布尔值,可选,默认为false,当true重复动画
请注意,与scene.beginDirectAnimation一起应用的动画不属于任何对象或场景,因此场景不知道这些动画,它们也不会在scene.animations中注册。如果希望不更改目标对象,则此方法对于将一次性动画应用于对象或为不具有Animations属性的对象非常有用。其他可选参数可以在scene API中找到。
如果scene.beginDirectAnimation是你所想的首选方法,但还需要对未来可以使用的动画进行引用,则需要保存一个Animatable对象(如下一章节)。
4. Animatable
scene.beginAnimation和scene.biginDirectAnimation都返回一个Animatable对象,当需要更改动画的状态时可以引用该对象。只需捕获上面某个方法的返回即可存储它。
const myAnimatable = myscene.beginAnimation(target, from, to, true);
存储可设置动画后,可以根据需要调用以下任意方法来更改动画的状态。
- pause()
- restart()
- stop()
- reset()