山海鲸可视化

【实战】如何制作2D和3D电梯动画,并设置电梯状态?

1. 制作 2D 电梯动画

image.png
2D 电梯动画示意图

image.png
2D 电梯动画构成图

要制作如上图所示的 2D 电梯动画,步骤如下:

1.1 添加底图

使用图形组件、图片组件或直接导入本地素材,来制作代表楼层总高度的底部图形
image.png

使用图形组件或图片组件,来制作电梯箱。
image.png

1.2 添加数据条件

以下面的示例数据为例,用不同的颜色区分电梯类型。
image.png

紫色代表客梯,绿色代表货梯。
image.png

添加数据条件来区分不同状态的电梯。
步骤一:添加如下数据条件。
image.png

步骤二:选中电梯箱,打开“图形颜色”扩展设置,点击添加“条件样式”
image.png

1.3 设置条件样式

添加如下条件样式设置:
image.png

数据示例如下:
image.png
image.png
image.png

1.4 确定电梯箱在每层楼的位置

(1)在 2D 电梯动画中,图形的 X 值是固定的,Y 值变化代表着电梯的上下移动,因此数据只需要电梯箱对应电梯在每层楼的 Y 值。
(2)电梯的移动范围是以底部图形的底部到顶部的位置为准。以下面的示例数据为例,底部图形的最底部相当于楼层“01F”,底部图形的最顶部为楼层最高层“16F”
(3)在示例数据中,根据底部图形位置确定第一层和最高层的 Y 值,取电梯在第一层和最高层的 Y 值,并根据楼层数量算出每层楼的 Y 值的间距,可以使每层楼高度更加的准确。如下面的示例数据中,2D 电梯中 01F 的 Y 值设定为“1663”,16F 的 Y 值设定为“868”,两者相减后的结果再除以 15,从而得出每层电梯箱之间的间距,最后得出每层楼电梯箱的位置,3D 电梯同理。
(4)在真实的项目中,客户需要提供电梯在每层楼的实际位置坐标,设计师确定电梯箱在底部图形最底部的位置坐标,通过换算得出电梯箱在每层楼的位置坐标。

示例数据:
image.png
image.png

依次选中其他电梯箱,添加数据字段。
image.png
image.png

【温馨提示】“连接数据”的窗口中,需要开启“数据逐条轮播”“循环”的选项,秒数可自由修改。
image.png

1.5 进行数据微处理

打开“数据字段”扩展设置,点击“数据微处理”
image.png

“数据微处理”的窗口中,开启“补间动画”“数据微处理”的按钮。
image.png

【温馨提示】
(1)坐标轴的数值需要随数据发生变化要输入“**{:data}”不需要随数据发生变化要输入“{:value}”。例如在该项目示例中,电梯箱的 Y 值是随数据变化的,但 X 值是固定不变的,因此在“数据微处理”窗口中,输入公式中的 Y 值填入“{:data}”,X 值填入“{:value}”
(2)在
“数据微处理”窗口中填入公式时,一定要在输入法为英文**的状态下输入,并检查好各个组件的名称。

2. 制作 3D 电梯动画

image.png
3D 电梯动画示意图

image.png
3D 电梯动画结构图

要制作如上图所示的 3D 电梯动画,步骤如下:

2.1 添加电梯模型

在山海鲸可视化软件中添加如下电梯模型。
image.png

【温馨提示】在 Blender 软件中制作电梯模型时,电梯箱不能与其他物体模型合并在一个组中,每个电梯箱都必须单独为一个图层。
image.png

2.2 添加电梯箱位置

选中电梯模型,打开“位置”设置项扩展菜单,添加数据字段(位置取值与 2D 电梯动画中的取值同理)。
image.png

2.3 制作电梯装饰线

“模型”菜单中展开“参数化模型”列表,选择“实线”来制作电梯装饰线
image.png

电梯装饰线样式如下图所示:
image.png

【温馨提示】由于示例项目中包含多个电梯箱模型,所以要把各实线的名称命名好。

线段只有两个顶点,只保留两个坐标点,将多余的坐标点删除。
image.png

先为线段的其中一个顶点添加坐标。由于示例项目中线段的第二个顶点需要根据数据来随电梯箱移动变化,因此第二个顶点的 Y 轴数值是移动变化的,X、Z 轴是固定的,手动输入 X、Z 轴坐标即可,  然后再对“坐标点”设置项生成数据字段。
image.png

“动态数据字段”中要勾选和跟随物体一样的数据。
image.png

打开“数据字段”扩展设置,点击“数据微处理”
image.png

“数据微处理”窗口中,开启“补间动画”“数据微处理”按钮。
image.png

坐标轴数值需要随数据发生变化要输入“{:data}”,坐标轴数值不需要数据发生变化要输入“{:value}”
image.png

若移动顶点没有在被跟随物体的中心点上,可在公式后面添加数值。
image.png

【温馨提示】
(1)在“数据微处理”窗口中输入公式时,一定要在输入法为英文的状态下输入;
(2)一定要命名并检查好各个组件的名称,尤其是实线组件;
(3)电梯装饰线一定要使用“实线”,如需要给实线设置颜色,需要在“基础色”设置项中通过添加贴图的方式来设置。

3. 电梯状态的设置

image.png
电梯状态示意图

image.png
电梯状态构成图

要完成如上图所示的电梯状态设置,步骤如下:

3.1 添加底图

  1. 使用图片组件或图形组件来制作底图图形
    image.png

  2. 使用图片组件或图形组件来制作状态图形
    image.png

3.2 添加数据条件

给每一个状态图形设置数据条件,通过数据条件来表现电梯实时的运行状态。
步骤一:添加如下数据条件。
image.png
image.png

步骤二:打开“图片地址”设置项的扩展设置,给每一个状态图形添加条件样式
image.png

【温馨提示】
(1)添加数据条件时,要注意命名好每项数据条件的名称;
(2)表示上行、下行、停止的图形需要尺寸相同