设置交互

在大屏中,交互分为两种:
第一种:通过鼠标操作触发,例如点击一个按钮触发一个弹窗
第二种:通过全屏播放/数据变化触发,例如全屏播放时播放一些动画,或数据异常时组价的颜色发生变化

这两种都可以直接在软件中设置,具体步骤如下:

  1. 通过鼠标操作触发的交互

这种交互设置在触发组件上,即点击 A 触发 B 的时候,交互是设置在 A 组件上的。

举个例子:
大屏中有一个按钮组件和一个单行文本组件,假设我们需要让按钮有一个 Hover 效果(鼠标移到按钮上时按钮有一个显示效果),而且希望点击按钮之后按钮切换到高亮选中状态(高亮的样式和 Hover 样式一致),同时点击按钮时切换单行文本组件到高亮状态。
首先我们需要给按钮组件和单行文本组件各自创建一个新的状态,关于多状态请参考该教程 →_→ 设置组件的多状态
image.png
针对按钮的 Hover 和点击高亮,这个是点击按钮自身触发的,所以设置在按钮的交互里。
点击选中按钮组件,然后右侧切换到交互窗口,点击“添加交互”。
image.png
需要注意的是,不同状态下的交互默认是锁定的(意味着在一个状态下设置的交互在其他状态下会保持一致),如果我们解锁了交互设置,那么该状态下的交互就是独立的,修改交互不会影响其他状态中的交互。
image.png
点击“添加交互”后我们可以对交互进行详细设置,包括:
名称:如果不填写,系统会给一个默认名称,在交互设置比较多时,设置一个名称会有利于我们识别当前交互是干什么的。
事件:指的是触发动作,包括鼠标点击时和鼠标经过时。
动作:指的是由事件触发之后的交互行为,包括切换组件状态、控制弹窗、子大屏跳转、打开网页、刷新数据和过场动画,不同的动作会有一些不同的参数设置。(此处的刷新数据就是刷新当前子大屏的数据,类似手动刷新数据的操作)
image.png
此处我们选择切换组件状态,然后目标组件选择按钮,状态选择按钮的高亮状态。
顺序主要针对同一个操作触发多个连续交互时,可以设置互相之间的执行顺序,包括与上一个动作同时或者在上一个动作之后执行。
image.png
点击确定之后我们会发现交互窗口中多了一个鼠标点击时分类,分类里有一个切换组件状态的交互。
image.png
接下来我们再添加一个鼠标移动到按钮时按钮切换到高亮状态的交互。
image.png
image.png
然后我们再设置一个点击按钮切换单行文本组件状态的交互。
image.png
image.png
以下是点击之后的效果。
image.png

  1. 通过全屏播放或数据变化触发的交互

这种交互设置在子大屏上,在未选中组件时,可以在右侧交互中进行设置,如下图所示:
image.png
点击“添加交互”可以看到这里的事件和组件交互中的事件不一样。包括:全屏播放时和数据变化时。
image.png
但是动作以及相关参数设置是一样的。
image.png

如果事件选择了“数据变化时”,则需要选择数据条件,关于数据条件的设置请参考这个教程 →_→ 数据条件

通过数据条件切换状态和条件样式可以达到相同的效果,只不过条件样式的设置项的颗粒度更小一些,具体请参考这个教程 →_→ 条件样式

【温馨提示】在交互设置时,一些常见的动作选项在下拉菜单中可以直接选择,如果找不到您想要的动作选项,那么很有可能这个动作被放在过场动画里,您可以在添加过场动画的参数里设置。