效果

随意画一条曲线(或 管道),任意图标能沿着轨迹运动,如下所示:

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_连线

步骤


新建

参见 1新建。命名为"初体验-沿轨迹运动"

拖入组件

拖入 按钮 定时器、工具函数( 透明传递)组件以及叉车图标,并绘制 管道。各组件位置

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_自增_02


UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_自增_03


UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_自增_04


UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_自增_05


UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_自增_06

指定沿轨迹运动按钮设置(可忽略) 外观-文字设置开始

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_自增_07

工具函数设置

其他属性保持默认值即可。

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_连线_08

定时器设置 间隔周期设置为10

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_自增_09

管道绘制绘制如下(轨道),参见 管道

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_连线_10

连线操作

步骤1:按钮点击,开启定时器不关联属性( 按钮)→ 开启 定时器)。

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_自增_11

步骤2:定时器周期执行函数不关联属性( 定时器)→  执行 定时自增)。

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_自增_12

步骤3:设置图标的拓扑连线右键菜单,选择连线-拓扑连线,从叉车图标指向 管道。如下所示:

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_连线_13

步骤4:动态设置图标的轨迹属性 输出 定时自增)→  轨迹进度值(叉车)。

注意:前面有勾选输出合并非覆盖。这步很关键。

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_连线_14


步骤如下:

图标与任意曲线拓扑连线后,图标就会新增一个轨迹属性,该属性可以填入0~100,对应轨迹百分比位置。

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_设置别名_15


搭建完毕!

注意:测试运行时,会发现轨迹走完时,图标会跑偏。此时可以加上复位设置,参见下面附加内容。


附加(可忽略)

加上下面设置,实现轨迹跑完后,回到原点继续移动,避免结束后跑偏。

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_连线_16


步骤如下:

拖入组件

拖入 透明传递 基本数学计算 条件逻辑判断函数,并属性设置


UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_设置别名_17


**“输出值”**函数设置

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_连线_18

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_自增_19

**“复位为0”**函数设置

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_设置别名_20

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_连线_21

**“与100比较”**函数设置

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_连线_22

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_连线_23

**“相比大于时”**函数设置

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_自增_24

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_自增_25

连线操作

前面步骤2定时自增,超过100就出界了。现在增加判断,值大于100就复位,依次往复。以下就从 步骤3起。

步骤3:对值定时自增 输出 定时自增)→  输入(组) 输出值)。

注意:前面有勾选输出合并非覆盖。这步很关键。

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_连线_26

步骤4:值与100比较输出 输出值)→ 输入(组) 与100比较)。

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_自增_27

步骤5:判断比较结果输出 与100比较)→ 输入(组) 相比大于时

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_自增_28

步骤6:大于100就复位输出 相比大于时)→ 输入(组) 复位为0

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_连线_29

步骤7:复位为初始0输出( 复位为0)→输入(组)( 输出值

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_连线_30

步骤8:图标拓扑连线略。与之前的步骤3一样。

步骤9:输出轨迹位置。 输出 透明传递2)→  轨迹进度值(叉车)

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_设置别名_31


步骤如下:

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_自增_32


最终效果:

UIOTOS文档:指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat_连线_33