交互专题

莫奈的交互体系是怎样构建的?

分为点击数据筛选交互和大屏交互引擎两部分

Part 1 什么是数据筛选?

应用场景:在对组件的点击过程中,希望看到另一个组件的数据展示做出响应

操作步骤:在【触发组件】的【交互界面】上,点开【点击交互事件】选项卡(不同组件名称不同,具体参见对照表),对于可响应的数据字段绑定一个自己设定的变量;然后到【响应组件】的【数据界面】上,设置数据筛选条件,将触发组件的特定字段和响应组件的特定字段关联起来,达到触发组件被点击时响应组件的数据筛选条件被触发,从而展示不同的数据。

案例展示:

Part 2 什么是莫奈交互引擎?

莫奈交互引擎为用户提供了针对大屏全局和局部组件的事件定义及相应可以触发动作的配置能力。用户能够通过交互引擎,让大屏的元素动起来,让大屏的展示效果,得到了质的提升。

莫奈交互引擎支持哪些事件?

目前莫奈交互引擎支持两大类事件,针对于大屏的全局事件和针对于组件的局部事件。

全局事件:

目前针对于大屏,我们支持捕捉每个大屏数据加载完成这一事件。

局部事件:

目前针对组件的局部事件,我们支持捕捉针对于鼠标的点击、双击、移入、按下、抬起、移出事件。此外,交互引擎还支持由组件接入数据、变量触发的交互事件。

image-20210527143004155

莫奈交互引擎支持哪些触发动作?

触发相关的交互动作是交互引擎的关键,目前莫奈支持以下两种触发事件,全局事件和局部事件;其中局部事件又支持鼠标动作触发和组件数据、变量触发;

(1)全局事件触发

用户可选择【数据加载完成时】作为交互动作的触发条件,选择后,大屏所有数据加载完成后即可触发交互动作;

(2)局部事件触发

① 局部事件:鼠标动作触发

在组件交互配置处设置,用户可选择局部事件中,各种鼠标动作作为交互动作的触发条件;

1130

**应用场景:**在对组件的【图形区域】进行鼠标交互操作时,实现【大屏交互动作事件】效果

**操作步骤:**在【触发组件】的【交互界面】上,点开局部事件选项卡,

选择对应的【鼠标事件】(包括鼠标单击、鼠标双击、鼠标移入、鼠标移出、鼠标按下、鼠标松开),进入【大屏交互动作事件】界面,进行相应的事件设置

案例展示:

② 数据事件:组件数据改变时

当用户选择【组件数据改变时】,即可设置触发交互动作的数据配置;

11301

**应用场景:**组件关联的【数据】(例如连接了一些实时数据)发生改变时,实现【大屏交互动作事件】效果

**操作步骤:**在【触发组件】的【交互界面】上,点开【组件数据改变时】,进入【大屏交互动作事件】界面,进行相应的事件设置

案例展示:

③ 数据事件:组件变量改变时

当用户选择【组件变量改变时】,即为当该组件所定义的变量的值改变时,即可触发相应的动作

11302

**应用场景:**在对组件的点击过程中,实现【大屏交互动作事件】效果

**操作步骤:**在【触发组件】的【交互界面】上,点开【组件变量改变时】,进入【大屏交互动作事件】界面,进行相应的事件设置

案例展示:

莫奈交互引擎支持哪些动作?

(1) 打开页面

目前支持打开项目中已经发布的链接,或者外部链接。

image-20210527143231526

image-20210527143329682

image-20210527143338351

①当前页面打开

在当前页面打开新连接。

②新页面打开

在新页签打开链接。

③父页面打开

在父页面打开链接,常见于页面中的iframe和弹框中使用。

(2) 组件动作

image-20210527143433880

①组件样式调整

支持组件通过特定触发事件改变自己或者其他组件的组件样式:

image-20210527143834610

image-20210527143845026

image-20210527143854591

②组件动画设置

支持用户对组件的动画进行设置,目前支持内容如图:

image-20210527144803380

同时支持用户修改组件的动画时长和实时预览。

③组件显隐设置

image-20210527144901864

image-20210527151658212

支持针对于组件的显示、隐藏和切换显隐的效果。

(3)触发其他绑定事件

支持触发当前大屏中已经绑定事件的组件的事件。

image-20210527152124007

image-20210527152131041

判断条件怎么设置?

判断条件为,当交互动作触发后,可根据不同的判断条件进行不同的交互动作; image-20210527152131041

以上示意图为交互动作的整体流程,即【触发】-【判断】-【动作】;

在已经创建好的交互动作处,点击“if”icon即可开始设置判断条件;

image-20210527152131041

在弹出设置框内即可设置具体的判断条件;

image-20210527152131041

可以设置每一条限制条件之间的逻辑关系,目前支持“且”和“或”两种逻辑;

下方可设置不同的判断限制条件,可选择该大屏中不同的组件,并根据不同组件的显隐状态、数据或变量值设置不同的条件;

最后更新时间: 11/30/2021, 9:01:48 PM