FVS三维组件动画应用实例

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。

1.1 版本

1.2 场景介绍

本文主要介绍 FVS三维组件 中上传自定义模型时，若模型带有动画方案，应该如何添加模型动画，以及如何实现其他组件与动画的联动效果。

本文参考实例可点击跳转至模板库下载模板进行体验：SMT贴片产线监控demo  。视频演示效果如下：

1.3 实现思路

本文仅示范模型动画的应用，实现效果如下：

1）页面1 和 页面2 使用同一模型，页面1 中模型开启动画，页面2 中模型不开启动画；再通过 标题组件 切换分页，实现动画的停止与播放。

2）页面3 中使用的模型包含两种不同效果的动画，同样使用标题组件点击联动三维组件动画，实现模型的展开与合并动画。

点击下载模型文件：SMT贴片机模型.zip

2.1 新建模板

新建一张可视化看板，可自定义名称、画布尺寸等。如下图所示：

点击组件区「三维组件>三维自定义场景」，将组件添加到画布中，点击右侧配置区「编辑组件」，进入自定义模型组件编辑页面。如下图所示：

2.2 创建场景

首次进入自定义模型组件编辑界面时，需要生成一个空场景或导入已有场景。这里我们选择一种风格，生成场景即可。如下图所示：

2.3 添加模型

1）进入场景编辑界面后，点击右侧配置栏的「模型>添加模型对象」，点击「添加模型」，将下载的 glb 模型文件上传至模型库。如下图所示：

2）上传模型后，选中「SMT单条产线移动.glb」，点击「载入场景」，界面中则会出现选中的模型。如下图所示：

2.4 设置SMT产线移动动画

2.4.1 开启模型动画

在「模型」配置面板中，点击「模型动画管理」，勾选「开启模型动画」，再点击「添加动画方案」。

若模型带有动画，则可以选择动画，并设置动画播放的方式。

SMT单条产线移动.glb 模型有 4 种移动动画方案，选择任意一种，选择「立即播放动画」，并勾选「开启循环播放」。

如下图所示：

2.4.2 复制页面并关闭模型动画

1）完成动画设置后，点击模型边界界面左上角「返回可视化看板」 返回画布，选中组件，点击右上角「视角调整」，组件边框变为虚线，即可调整模型视角。调整好后单击模板界面其他任意位置可退出视角调整。如下图所示：

2）选中「页面1」，单击鼠标右键点击「复制页面」，将新页面命名为「页面2」。如下图所示：

3）进行 页面2 中的自定义模型组件，取消勾选「开启模型动画」。如下图所示：

4）返回画布，再调整一个合适的视角。

2.4.3 设置标题组件切换分页

1）在 页面1 中，添加一个「标题组件」，标题内容为「停止播放」。再给其添加一个「交互>点击事件>分页跳转」事件，跳转到没有动画效果的 页面2 。如下图所示：

2）设置完成后，将标题组件复制粘贴到 页面2 中，再修改其内容为「继续播放」，将分页跳转事件修改为跳转到 页面1 。如下图所示：

2.5 设置贴片机展开合并动画

2.5.1 添加模型对象

点击画布下方「点击新建页面」，新建一个 页面3 ，在 页面3 中添加一个自定义模型组件。

这里参考 2.3 节操作演示，选中已经上传的「SMT贴片机爆炸归为.glb」模型文件即可。

如下图所示：

2.5.2 开启模型动画

点击「模型动画管理」，勾选「开启模型动画」即可。这里不需要添加动画方案，因为要通过标题组件来触发动画。如下图所示：

2.5.3 设置标题组件联动三维组件动画

1）完成动画设置后，点击模型边界界面左上角「返回可视化看板」 返回画布，根据实际情况调整自定义模型组件的大小和视角。如下图所示：

2）在 页面3 中添加一个标题组件，标题内容修改为「模型展开」，点击「交互>添加点击事件>三维组件动画」。如下图所示：

选择三维组件后，若组件使用的模型包含动画方案，则可以选择触发动画。这里选择「爆炸」动画，触发时机为点击立即触发。如下图所示：

设置完成后，再复制一个标题组件，将触发动画改为「归位」动画。

这样在预览时，点击不同的标题，即可触发不同的动画效果。如 1.3 节所示。

注：三维组件不支持移动端。

点击下载本文示例模板及数据：模型动画应用示例.zip

模板资源在线体验： SMT贴片产线监控

模板资源下载地址：SMT贴片产线监控demo