使用动画曲线编辑器打造炫酷的3D可视化ACE

前言

在制作3D可视化看板时，除了精细的模型结构外，炫酷的动画效果也是必不可少的。无论是复杂的还是简单的动画效果，要实现100%的自然平滑都是具有挑战性的工作。这涉及到物理引擎的计算和对动画效果的数学建模分析。一般来说，只有专业的3D建模从业人员才能完成这项挑战。然而，在实际情况下，当我们对动画精细程度的要求不是特别高时，仍然可以借助一些外部工具来实现一些常见的动画效果，例如巡检、移动和旋转等。今天小编向大家介绍的工具就是Babylon.js中提供的动画曲线编辑器。用户只需要通过简单的拖拽和点击操作，就能自定义设计想要的动画效果，提升3D可视化看板的视觉效果。（如下图所示）

环境配置

要使用动画曲线编辑器，就得先使用 Babylon Inspector，Babylon Inspector是 Babylon.js 提供的一个强大的模型检查工具，不仅可以查看模型网格对象的各种属性，还可以提供 gizmo 工具来让用户手动拖拽缩放平移网格体，实现和3D模型的实时交互，除此之外，Babylon Inspector还具备动画曲线编辑器等强大工具，让用户通过UI操作就能自定义设计动画效果，下面是使用Babylon Inspector前需要了解和准备的一些环境配置：

1） babylon playground 站点：这个站点提供了一个在线的 Babylon.js 代码运行环境，用户可以在这个平台上协同创建3D场景**。**
2） babylon sandbox 站点：这个站点提供了一个在线的模型运行检查环境，用户可以在这个平台上检查自己的模型文件是否正常运行，参数设定是否如预期。

3）通过代码引入Babylon.js：

npm install @Babylon.js/core
npm install @Babylon.js/inspector

引入依赖包之后，需要指定对应的3D应用场景的Inspector查看器：

import { Inspector } from "@Babylon.js/inspector";
function createScene(){
// create Babylon.js scene}

动画编辑器的操作指南

在使用动画编辑器之前，小编向大家简单介绍一下Babylon.js中的动画。实际上，Babylon.js中的动画是按顺序执行的一系列静态画面。因此，只要了解每一帧模型对象的属性值，就可以制作出对应的动画效果。

动画编辑器中修改模型属性的两种方法

第一种方法：选中一个模型对象，选择右侧对象的 Animations 属性，点击 Editor 就可以新增或修改动画。
第二种方法：选中一个模型的 AnimationGroup ,即可编辑 Group 中每个单独动画。

动画编辑器的菜单栏指南

（1）选择左侧的菜单编辑栏，点击编辑按钮。

（2）然后就会进入到这个界面。

“+” 按钮即为创建动画按钮，一个动画编辑器中可以创建多个动画，每个动画中的选项如下：

Display Name ：动画名称。
Mode ：Mode为List表示内置的模型属性，Mode为Custom表示自定义的模型属性。
Property：指的是要对动画进行操作的对象的属性。例如，可以选择移动一个模型的位置属性，旋转模型的旋转属性，或者改变模型的颜色属性等。通过选择不同的属性，你可以控制模型在动画中的变化和动作。
Type ：指的是要应用于属性的动画效果的类型。在动画编辑器中，可以选择不同的动画类型，例如线性动画、贝塞尔曲线动画、弹簧效果动画等。每种动画类型都有自己特定的方式来改变属性的值，从而实现不同的动画效果。

（3）接下来我们再回到第一步，找到编辑器的控制面板。

其中按钮分别是：

当前 key 帧数：当用户选中一个 key 时,可以通过这个输入框来修改当前 key 的帧号 （选中一个key时）
当前 key value：当用户选中一个 key 时，可以通过这个输入框来修改当前 key 的属性具体值 （选中一个key时）
创建关键 key：这个按钮将会在整个播放轴上创建一个新的关键key，并且将渲染画布此时网格对象的对应属性值作为新创建 key 的属性值，(换句话说，可以在 inspect 页面通过 gizmo 工具拖动旋转物体到指定位置，点击创建关键 key 按钮就能创建一个新的关键 key , 并将手动拖动的网格对象的属性值作为该关键 key 的value 值)
帧画布，这个按钮会自适应当前设定的关键 key，当设定的 key value 超出画布时，可以使用该按钮来重置画布。

接下来的 5 个按钮（下图）都是用来控制每个关键 key 和前后帧的 value 之间的变化关系，也就是关键 key 的左右切线：

平铺切线，会让当前关键 key 的左右切线都变成水平线，在这种情况下，由于左右斜率一致，我们可以做出一些更加平滑的曲线效果出来
线性切线，会让当前关键 key 的左右切线都变成指向前后关键 key 的一次线条，一般用来展示一些匀速变化关系
切分左右切线模式，可以单独的控制关键 key 的左右切线
整合左右切线模型，如上，切分模式的反面
阶梯式切线，在从当前 key 到下一个 key 之间的帧，value值保持不变，在下一个关键 key 到来时，value 瞬间切换到该 key value，可以用来制作一些转身，旋转的瞬时动画。

（4）最后给大家介绍动画播放面板

按钮分别如下

第一帧和最后一帧
前一帧和后一帧
前一个关键key和后一个关键key
正放与倒放动画
播放范围，需要指定动画开始和结束播放帧数

正常情况下，指定了动画属性值和播放模式之后，就可以点击创建关键 key 来设定关键动画值，一方面可以在 inspector 中手动拖动网格对象，让新建key来获取指定 value, 另一方面也可以在动画播放面板反复查看修改动画属性，制作好动画之后，就可以使用保存按钮来将制作好的动画导入了。对于历史动画也可以通过导入按钮来对动画做细节调整。

举个例子：动画操作实战

下面小编将以一个绕场一周的动画为例，给大家详细介绍如何使用Babylon.js：

（1）首先需要获取到总帧数，以及特定行为(转向移动)的对应帧数。(这一步是动画制作最重要的一步，总体上可以参考物理位移原理位移 = 速度 * 时间来合理设计帧数。)

获取到物体运动的路线图，记录下每一个特殊(转向移动)帧模型对象所在的坐标(这里可以使用Inspector 当中的坐标拾取功能以及位移 gizmo 工具来快速获取)
给物体运动设置一个固定速度，比如每秒 2.5 个单位，使用坐标算出来每个坐标到坐标的距离，然后除以时间，结果就是每个单独路径的耗时。
然后计算累计耗时

累计耗时乘以默认每秒渲染的帧数，就可以得到最终的动画帧数据了**(切记不要忘了乘每秒帧数，默认每秒60帧)。**

（2）接下来就要引入 Inspector 模块了，参考文章开始的 playground、sandbox或代码方式来引入 Inspetor, 引入后打开动画编辑器，新建动画。

修改动画播放范围：

确定Y轴动画：

然后按照“创建新 key” => “设定新key frame value” => “播放动画”的步骤来创建新key：

通过切线按钮可以调整动画之间的线性关系：

最后就是点击保存按钮，点击导出成 file，代码如下所示：

// url 文件方式let animation = Animation.ParseFromFileAsync(null,urlPath)// json hard-codevar json = animationJson; // 将动画文件内容写死在代码里let animation = [Animation.Parse(animationJson[0])];// 直接执行动画，或者包装成 animationGroup 来执行，后者封装性更好；let robot.animations= animation;scene.beginAnimation(robot,0,8871,true);// animatioinGrouplet robotAnimation = new BABYLON.AnimationGroup("robotAnim",scene);robotAnimation.addTargetedAnimation(animations[0],robot);robotAnimation.addTargetedAnimation(animations[1],robot);robotAnimation.from = 0;robotAnimation.to = 3120;robotAnimation.start(true,1,robotAnimation.from,robotAnimation.to,false);

总结

以上便是使用动画曲线编辑器来实现一个简易动画的全过程了，最后也上传一份代码集成 Inspector 模块的示例，感兴趣的小伙伴可以试试。 3D-Inspector.zip

扩展链接：

创意展示：打造数据大屏的炫酷天气预报插件

聊一聊数字孪生与3D可视化

探秘移动端BI：发展历程与应用前景解析