BabylonJS 6.0文档 Deep Dive 动画（三）：Animation的方法

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()

5秒后执行盒子动画示例