该配置器可用于对产品设计团队指定的系统运行进行动态可视化。它能轻松成为多部门协同的实用工具,让你能够实时观察空调性能、材料构成,并查看尺寸和用户界面。空调配置器也是一种数字可视化工具,让你可以根据制冷需求和能效偏好,实时配置并测试制冷系统。
该空调配置器的目标是使用自定义的 悬浮 UI、交互和动画.
悬浮 UI 需要:
动画需要:
该项目是在 在 Vectary Studio 中从头建模的 使用基础几何体、编辑模式和修改器。空调的顶部最初是在 Figma 中绘制并导入为 .svg 文件,然后在其中转换为几何体并用于 布尔运算以创建切口.
我们将这个项目分为几个类别,首先是动画。共有四个动画:启动、停止、风扇和扫风模式。正如其名,每个动画都执行特定的功能。
创建 多个动画而不是仅有一个 能让你对它们拥有更多控制。在设置交互时,你可以根据动画时长设置特定长度 of 延迟,从而营造出连续动画的感觉。这样,一个动画结束时,下一个动画就会开始。这种方法让你在稍后将动画与悬浮 UI 元素结合并设置交互时,能够对动画进行更好的控制。不要忘记设置正确的 条件;否则,顺序可能无法正常运行。例如,扫风模式触发扫风动画,而该动画只有在启动动画结束后才能播放。
整个场景被设置为 中性的浅灰/白色调。室内空调通常会融入房间背景中,不会引起太多注意,这就是我们选择白色和金属材质的原因。这款空调的一个绝妙设计特点是前盖,它在设备不工作时可以遮挡内部组件。在前盖顶部,有一个薄片几何体,应用了 玻璃材质 ,赋予其深度和精美的反射效果。温度和图标位于该玻璃面板下方。外侧部分烘焙了光照贴图,而 环境光遮蔽 (AO) 则用于内部组件。AO 贴图的 尺寸比光照贴图更小,因此非常适合不需要高细节的区域。
动态材质应用到两个带有噪声和弯曲修改器的平面上,使用的是 Lottie 文件 的 .json 格式,两者都 设置为自发光 并具有一定的不透明度。
提示:地面无法旋转。为了在空调后面的墙上获得均匀分布的阴影,可以使用带有烘焙 AO 贴图的平面。
悬浮 UI 模拟了真实空调遥控器的简化版本。它包含电源开关、温度升降按钮,以及开启/关闭扫风模式和空气过滤的按钮。点击角落的 logo 图标可以切换 FUI 的显示状态,确保 FUI 不会一直遮挡 Canvas。
空气净化器图标会触发两种图标状态的显示:一种是表示关闭的颜色,另一种是表示开启的绿色。它还会触发实际空调中 3D 叶子图标的显示。
扫风模式会触发扫风动画,前提是启动动画已播放完毕。
电源按钮图标巧妙地利用了显示/隐藏交互来切换两个图标,从而无需定义条件。电源按钮会触发多项操作,例如通过动态材质显示气流、将电源按钮状态显示为开启、播放启动动画以及使用 3D 文本显示温度。再次点击关闭电源按钮则会触发停止动画,并隐藏带有箭头的动态气流材质。



这个项目最重要的方面是事件的使用,它定义了 基于元素行为的特定逻辑。在此场景中,事件控制着温度设置。首先,你需要设置加载时的事件值。我们使用的是 Number 类型的事件,其中创建了一个新的 Temp_def 事件,值设置为 24。这意味着,一旦你打开项目,FUI 和空调上的默认温度将设置为 24。你可以将这个 Temp_def 插入到 Studio 中的其他元素中,例如 3D 文本或悬浮 UI 文本字段。
接下来,你需要定义点击时 Temp_def 将增加一个单位。新的交互将如下所示:
降低温度的交互设置为:点击 Down 图标,限制条件为最小事件、类型为 number、事件为 Temp_def、值大于 18。然后动作设置为事件、类型为 number、事件为 Temp_def、值为 Temp_def-1。
此设置将确保点击向上或向下图标时会 将温度升高或降低 1,最小值为 18,最大值为 28。

