Babylon动画

一个简单的亮度变化动画

在babylon中创建一段简单的动画很简单（本例子创建一个模拟天亮到天黑的动画），只需要三步
1、创建一个动画对象

    // 创建动画对象
    const lightAnimation = new BABYLON.Animation(
        "lightIntensityAnimation",  // 动画的名称
        "intensity",		// 动画放映中要改变的属性值
        30, 		// 每秒帧数
        BABYLON.Animation.ANIMATIONTYPE_FLOAT,// 动画的属性
        BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE// 动画的播放模式
    );

2、设置关键帧，即在给定的时间(帧数)动画化对象的行为，因此是两个值分别是frame和value，在这里我们是要改变灯光的强度因此关键帧设置为

const targetKeys = [
        { frame: 0, value: 0.1 }, // 初始灯光强度我们设置为0.1
        { frame: 30, value: 0.5}, // 1秒后灯光强度为0.5，因为最开始设置的每秒帧数为30，所以第30帧是一秒后，后续相同
        { frame: 60, value: 0.7},
        { frame: 90, value: 1  },
        { frame: 120, value:0.7},
        { frame: 150, value: 0.5},
        { frame: 180, value: 0.1},
      ];
 lightAnimation.setKeys(targetKeys);

3、给动画化的目标加上设置好的动画，并设置播放

light.animations = [];
light.animations.push(lightAnimation);
// 开始动画
scene.beginAnimation(light, 0, 180, true);

进一步理解Babylon动画

了解了最简单的动画创建过程后，现在我们分别分析下这三步，为你想创建不同的动画打下基础，首先第一步创建动画对象

const myAnim = new BABYLON.Animation(name, property, frames_per_second, property_type, loop_mode);

我们分别看下这几个参数：
name：创建的动画对象的名字，这个可以自由发挥。
property：这个换成我自己的理解就是，我动画化这个对象要改变的属性值，因此这个不是随意填写的，那我们之前的例子填写的是intensity，它动画化的对象是light，light要有intensity这个属性，他会根据你的关键帧改变动画对象的这个值，如0帧时，设置light.intensity=0.1。
frames_per_second：这个就很好理解了，动画每秒的帧数，越大动画越流畅（你也要设置更多的关键帧）但对性能的需求也更高。
property_type：理解了property这个就很好理解了，这个是property的类型，比如刚才的灯光，类型就是ANIMATIONTYPE_FLOAT，浮点数，还有一些常见的类型，比如颜色ANIMATIONTYPE_COLOR3，位置ANIMATIONTYPE_VECTOR3等，可以查看官网。
loop_mode：动画的播放模式，常见的就是一次播放ANIMATIONLOOPMODE_CONSTANT和循环播放ANIMATIONLOOPMODE_CYCLE，其他的也可一步官网自行查看，我也不懂。
理解了这个你就可以创建多种动画了，比如旋转，平移，渐变色，相机移动等。而且babylon理论上支持所有引擎可以获取的对象动画化，即使他没有动画属性。

然后我们看第二步

const targetKeys = [
        { frame: 0, value: 0.1 }, 
        ...
        ]

这个关键帧就像是剧本，我想要在哪个时间演员（动画化的模型）有哪个表演（动画的行为），帧数与刚才的灯光动画时没什么变化的，但是value有较大的变化，根据你动画化对象的属性，如果你要改变位置，value就是一个Vector值（可能是三维或二维），一个三维向量的例子是new BABYLON.Vector3(x,y,z),或者一个颜色new BABYLON.Color3(1,1,1)

其次是第三步

light.animations = [];
light.animations.push(lightAnimation);
// 开始动画
scene.beginAnimation(target, from, to, loop,speed,function);

就像我们在第一步说的 “babylon理论上支持所有引擎可以获取的对象动画化”light.animations = [];就是给我们动画化的对象赋予animations这个属性，虽然在这个例子中这是多余的。大家可以看到这个animations属性是个列表，所以大家应该也想到了一个对象可以有多个动画，这样我们就可以实现一个对象一边平移一边旋转了（new BABYLON.Animation一个这样的动画对象只能实现一种变化，大家从参数也可以看出，所以要实现一边平移一边旋转我们要创建两个动画对象）可以直接这样写light.animations = [Animation1，Animation2];。
其次我们看开始动画的函数
target：开始动画的对象，在上例中是light。
from, to：开始和动画结束的时间，一般是一次动画完整的演出时间。
loop：这个就很好理解了，动画是否循环播放，是个布尔值。
speed：动画的播放速度：1是正常播放，越大播放速度越快，负数不播放。
function：动画播放完毕后的回调函数，注意如果循环播放设置为true，则函数不会被触发。
并且这个函数时存在返回对象的，我们可以设置一个变量来接受它const myAnimatable = scene.beginAnimation(target, from, to, loop,speed,function);它存在一些方法，让你可以控制动画，分别是pause()、restart()、stop()、reset()，都很好理解，pause()、restart()一般组合使用控制动画的暂停与开始，stop顾名思义停止动画，或者说结束动画，如果让动画重新开始播放要再次调用beginAnimation，reset()是重置动画到起始状态（0帧），不改变动画的播放与暂停状态。

结束

对于动画的理解官网的一个例子我觉得很好，推荐大家看一下：排序动画。
还有更高级的动画功能也推荐大家去官网学习，playGround可以让大家直接运行代码，不需要考虑各种环境很方便。