本文为您介绍通过蓝图编辑器功能,使用定时器逻辑节点,实现单张图片组件的定点彩蛋展示方法。

前提条件

准备好您的交互需求。

本案例的交互需求为:当可视化应用中的定时器开始计时,并倒计时到某一定点时刻,单张图片彩蛋样式显示在可视化应用中的效果。

交互效果展示

彩蛋展示样式

理解案例交互

当前案例实现需要用户将交互转成节点和边的关联关系,需要使用的组件有满足需求的事件和动作才能进行配置,否则就无法实现。
  • 组件:组件包含两种能力,事件抛出能力和动作执行能力。
    • 全局节点:这个节点具备抛出页面初始化完成事件的能力。
    • 单张图片:属于被联动组件,具有接收数据并执行动作的能力。
  • 蓝图编辑器:通过运用逻辑节点编排的方式,将上游组件的交互/事件下游组件的执行动作绑定,从而实现页面内节点间的交互联动。
    说明 蓝图编辑器配置完成后需要在预览页查看配置效果。

配置案例交互

  1. 参考画布编辑器添加资产,在画布编辑器页面搭建所需要的单张图片组件。
  2. 配置单张图片的样式,在画布图层栏内,双击单张图片组件后重命名组件,并在单张图片组件右侧配置栏内选择一张作为彩蛋所需的图片,添加到背景图配置项中。
    配置组件样式
  3. 单击画布编辑器图层栏内单张图片组件,右键单击选择隐藏,将组件在画布中隐藏掉。
    添加组件
  4. 组件配置完样式后,单击画布编辑器图层栏内单张图片组件,右键选择导出到蓝图编辑器
    导出到蓝图编辑器
  5. 在画布编辑器页面左上角,单击蓝图编辑器图标(蓝图编辑器图标),切换到蓝图编辑器配置页面。
  6. 在蓝图编辑器配置页面,将左侧节点栏内的单张图片节点和逻辑节点栏内的全局节点定时器节点拖至画布中。
  7. 全局节点页面初始化完成事件与定时器节点的开始计时连线。
  8. 定时器当到计时点时单张图片节点的显示动作连线。
    蓝图编辑器组件连线示例
  9. 配置画布中定时器节点配置面板内的其他配置
    1. 单击定时器逻辑节点,进入右侧配置面板,选择面板内其他配置栏下方的定时方式定点定时
    2. 设置定点时间,自定义输入一个彩蛋定点显示的时间,本案例配置的时间为2020-12-28 15:00:00
      时间设置
  10. 定时器逻辑节点配置完成后,单击蓝图编辑器页面右上角的预览图标,查看单张图片彩蛋在倒计时到达定点时间后的交互效果。