BabylonJS 6.0文档 Deep Dive 动画（二）：动画设计

1. 设计一个剪辑

动画设计的第一步是决定你想在剪辑中看到什么内容，也就是表演是什么。这会给Performer和其动画以指导。

在下图中，有一个盒子（即Performer），每秒在两个位置之间移动一次。这个盒子可以从任何角度观看。

第一阶段的设计是在关键时间点绘制所需内容，有点像gif动图的设计。

一秒钟后，箱子应处于其新位置，再下一秒钟后应处于其起始位置。然后不断重复此系统动作。

在Babylon.js中，此动画的表现为盒子沿着x轴改变其位置，x轴的值是浮点数，整个动画应该循环播放。声明动画的类型至关重要，因为动画本身不知道要如何行动。在这个case中，动画只是沿着X轴移动盒子的位置。虽然动画将知道其目标（盒子），但它不知道如何让盒子沿X轴移动。为了解决这个问题，我们需要将动画的类型定义为浮点，即
BABYLON.ANIMATION.ANIMATIONTYPE_FLOAT，并将接受改变的属性定义为position.x。通过这些定义，动画有了如何将其关键帧应用于目标的路线图，从而形成了一个非常灵活和强大的系统，几乎可以为任何东西设置动画。在代码中，此声明看起来像：

const frameRate = 10;

const xSlide = new BABYLON.Animation("xSlide", "position.x", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

关键帧分别为0、1、2秒。

实际应用中，为了要在t秒后找到关键帧，请将时间乘以帧速率，即t * frameRate。在这种情况下，关键帧的帧号为0、1 * frameRate和2 * frameRate。盒子将在x轴=2处启动并将其滑动到x轴=-2，因此在0、1和2秒后，盒子的position.x值分别为2、-2和2。

关键帧被设置到一个JavaScript对象数组中，该数组具有帧（数字）和值的属性，并添加到动画中，如中所示

const keyFrames = [];

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

keyFrames.push({
    frame: frameRate,
    value: -2,
});

keyFrames.push({
    frame: 2 * frameRate,
    value: 2,
});

xSlide.setKeys(keyFrames);

至此动画现在已完全制作完成，可以赋值给盒子了

box.animations.push(xSlide);

再通过以下代码启动Performance（animatable对象）

scene.beginAnimation(box, 0, 2 * frameRate, true);

接下来可以通过此链接看到在线动画效果

2. 动画反转

有趣的提示是，beginAnimation方法的第二个和第三个参数是keyFrames列表中的开始帧和结束帧。如果反转这两个值，动画将反转播放！

const startFrame = 0;
const endFrame = 10;
const frameRate = 10;

const xSlide = new BABYLON.Animation("xSlide", "position.x", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

const keyFrames = []; 

keyFrames.push({
    frame: startFrame,
    value: 2
});

keyFrames.push({
    frame: endFrame,
    value: -2
});


xSlide.setKeys(keyFrames);

box.animations.push(xSlide);

//backwards animation
scene.beginAnimation(box, endFrame, startFrame, false);

点击此处可以看到在线示例

3. 动画曲线编辑器（ACE）

既然你已经开始了解Babylon.js的动画的基本知识以及如何创建它们，你还需要考虑看看动画曲线编辑器（ACE）。这个超级易于使用的工具允许您在几秒钟内创建完整的动画，而无需编写任何代码！

工具链接：ACE - The Animation Curve Editor | Babylon.js Documentation