本文为您介绍在DataV欢乐砸金蛋模板可视化应用中实现多个交互效果的蓝图配置方法。

背景信息

欢乐砸金蛋模板在年会或团建抽奖场景时,包含多个交互功能:
  • 当单击大屏中某个金蛋时,刷新金蛋动态样式初始状态,并展示金蛋碎裂动画。
  • 当单击大屏某个金蛋时,显示全屏半透明遮挡层。
  • 当单击金蛋且播放金蛋碎裂动画两秒后,大屏显示对应金蛋内的奖品图片。
  • 当单击奖品弹窗页面内的弹窗图时,关闭奖品弹窗页面及遮挡层。
  • 当单击奖品弹窗页面内的弹窗图时,关闭金蛋碎裂动态图样式的交互功能。
欢乐砸金蛋预览

步骤一:单击金蛋,金蛋展示碎裂动态图

在蓝图编辑器内,单击使用多个金蛋上方的按钮节点,刷新对应金蛋动态图样式的初始状态,随后显示金蛋碎裂动态样式的功能。

  1. 在欢乐砸金蛋模板的画布编辑器中,将图层栏内的动态成组中四个金蛋-动态组件全部设置成隐藏状态。
  2. 分别单击选中这四个金蛋-动态组件,并右键单击选择导出到蓝图编辑器
    动态设置成隐藏及导出到蓝图
  3. 再次分别单击选中四个按钮组件,并右键单击选择导出到蓝图编辑器
    按钮导出到蓝图编辑器
  4. 单击左上角的蓝图编辑器按钮,切换到蓝图编辑器页面。
    蓝图编辑器入口
  5. 在蓝图编辑器页面内,将导入节点内的四个按钮节点和四个金蛋-动态节点添加到蓝图画布中。
  6. 按钮1节点的点击按钮时事件分别与金蛋1-动态节点的刷新显示动作连线。
    使用同样的方法对其他三个按钮节点和金蛋-动态节点一一对应连线。最终连线样式如下图所示。完成连线
    说明 当前每个连线中间的串行数据处理逻辑节点是系统自动添加的,无需配置。
    最终通过连线,实现当单击不同金蛋时,金蛋动态图刷新成初始状态,随后展示金蛋碎裂的动画样式的交互功能。

步骤二:单击按钮,大屏显示遮挡屏幕的半透明图片遮挡层

在蓝图编辑器内,单击使用多个金蛋上方的按钮节点即可显示全屏遮挡层的功能。

  1. 在欢乐砸金蛋模板的画布编辑器中,将图层栏内的交互遮挡层组件,右键单击选择导出到蓝图编辑器
    遮挡层导出蓝图
  2. 单击左上角的蓝图编辑器按钮,切换到蓝图编辑器页面。
  3. 在蓝图编辑器页面内,单击交互遮挡层节点,将该节点添加到蓝图画布中。
  4. 按钮1节点的点击按钮时事件与交互遮挡层节点的显示动作连线。
    使用同样的方法对其他三个按钮节点和交互遮挡层节点一一对应连线。最终连线样式如下图所示。完成连线
    说明 当前连线中间的串行数据处理逻辑节点是系统自动添加的,无需配置。
    最终通过连线,实现单击使用多个金蛋上方的按钮节点即可显示全屏遮挡层的交互功能。

步骤三:单击按钮,时间延迟两秒后,大屏弹窗显示奖品图片

在蓝图编辑器内,单击使用多个金蛋上方的按钮节点,实现时间延迟两秒后,弹窗显示对应金蛋内的奖品图片的功能。

  1. 在欢乐砸金蛋模板的画布编辑器中,将图层栏内的四个延时弹窗成组全部设置成隐藏状态。
  2. 分别单击选中这四个延时弹窗成组,右键单击选择导出到蓝图编辑器
    延时弹窗导出蓝图并设置隐藏
  3. 单击左上角的蓝图编辑器按钮,切换到蓝图编辑器页面。
  4. 在蓝图编辑器页面内,单击导入节点内的四个延时弹窗节点,添加到蓝图画布中。
  5. 在蓝图编辑器页面内,添加四个定时器逻辑节点。
  6. 分别选中四个定时器逻辑节点,在右侧配置面板中,定时方式选择延迟定时延迟/间隔时间设置为2秒。
    定时器延时
  7. 将蓝图画布中的按钮1节点的点击按钮时事件与定时器逻辑节点左侧的开始计时相连,再将定时器右侧的当到计时点时延时弹窗1节点的显示动作连线。
    使用同样的方法对其他三个按钮节点、三个定时器逻辑节点和延时弹窗节点一一对应连线。最终连线样式如下图所示。完成连线
    最终通过连线,实现单击金蛋上方的按钮后,经过两秒钟的时间延迟后,弹窗显示对应金蛋内的奖品图片的交互功能。

步骤四:单击奖品弹窗图时,关闭奖品弹窗页面及遮挡层图片

在蓝图编辑器内,单击奖品弹窗页面内弹窗图节点,关闭奖品弹窗页面及遮挡层图片的功能。

  1. 在欢乐砸金蛋模板的画布编辑器中,分别选中图层栏内四个延时弹窗成组中的弹窗图组件,右键单击选择导出到蓝图编辑器
    弹窗图导出蓝图编辑器
  2. 单击左上角的蓝图编辑器按钮,切换到蓝图编辑器页面。
  3. 在蓝图编辑器页面内,单击导入节点内的四个弹窗图节点,添加到蓝图画布中。
  4. 将蓝图画布中的弹窗图1节点的当单击图片时事件与交互遮挡层节点的隐藏动作连线。
  5. 再将蓝图画布中的弹窗图1节点的当单击图片时事件与延时弹窗1节点的隐藏动作连线。
    使用上述两个步骤的方法对其他三个弹窗图节点与三个延时弹窗交互遮挡层节点一一对应连线。最终连线样式如下图所示。完成连线
    说明 当前连线中间的串行数据处理逻辑节点是系统自动添加的,无需配置。
    最终通过连线,实现单击奖品弹窗页面内的弹窗图时,关闭奖品弹窗页面及遮挡层图片的交互功能。

步骤五:单击奖品弹窗图时,关闭金蛋碎裂动态图样式

在蓝图编辑器内,单击奖品弹窗页面内弹窗图节点,关闭金蛋碎裂动态图样式的功能。

  1. 在蓝图编辑器页面内,将蓝图画布中的弹窗图1节点的当单击图片时事件与金蛋-动态1节点的隐藏动作连线。
  2. 使用同样的方法对其他三个弹窗图节点与三个金蛋-动态节点一一对应连线。最终连线样式如下图所示。
    最终蓝图连线
    说明 当前连线中间的串行数据处理逻辑节点是系统自动添加的,无需配置。
    最终通过连线,实现单击奖品弹窗页面内的弹窗图时,关闭金蛋碎裂动态图样式的交互功能。