本文为您介绍在DataV欢乐砸金蛋模板可视化应用中实现多个交互效果的蓝图配置方法。
背景信息
欢乐砸金蛋模板在年会或团建抽奖场景时，包含多个交互功能：
- 当单击大屏中某个金蛋时，刷新金蛋动态样式初始状态，并展示金蛋碎裂动画。
- 当单击大屏某个金蛋时，显示全屏半透明遮挡层。
- 当单击金蛋且播放金蛋碎裂动画两秒后，大屏显示对应金蛋内的奖品图片。
- 当单击奖品弹窗页面内的弹窗图时，关闭奖品弹窗页面及遮挡层。
- 当单击奖品弹窗页面内的弹窗图时，关闭金蛋碎裂动态图样式的交互功能。
步骤一：金蛋碎裂动态图展示
在蓝图编辑器内，单击使用多个金蛋上方的按钮节点，刷新对应金蛋动态图样式的初始状态，随后显示金蛋碎裂动态样式的功能。
- 分别单击选中这四个金蛋-动态组件，并右键单击选择导出到蓝图编辑器。
- 再次分别单击选中四个按钮组件，并右键单击选择导出到蓝图编辑器。
- 单击左上角的蓝图编辑器按钮，切换到蓝图编辑器页面。
- 将按钮1节点的点击按钮时事件分别与金蛋1-动态节点的刷新和显示动作连线。使用同样的方法对其他三个按钮节点和金蛋-动态节点一一对应连线。最终连线样式如下图所示。
说明 当前每个连线中间的串行数据处理逻辑节点是系统自动添加的，无需配置。最终通过连线，实现当单击不同金蛋时，金蛋动态图刷新成初始状态，随后展示金蛋碎裂的动画样式的交互功能。
步骤二：显示遮挡屏幕的半透明图片遮挡层
在蓝图编辑器内，单击使用多个金蛋上方的按钮节点即可显示全屏遮挡层的功能。
- 在欢乐砸金蛋模板的画布编辑器中，将图层栏内的交互遮挡层组件，右键单击选择导出到蓝图编辑器。
- 将按钮1节点的点击按钮时事件与交互遮挡层节点的显示动作连线。使用同样的方法对其他三个按钮节点和交互遮挡层节点一一对应连线。最终连线样式如下图所示。
说明 当前连线中间的串行数据处理逻辑节点是系统自动添加的，无需配置。最终通过连线，实现单击使用多个金蛋上方的按钮节点即可显示全屏遮挡层的交互功能。
步骤三：大屏弹窗显示奖品图片
在蓝图编辑器内，单击使用多个金蛋上方的按钮节点，实现时间延迟两秒后，弹窗显示对应金蛋内的奖品图片的功能。
- 分别单击选中这四个延时弹窗成组，右键单击选择导出到蓝图编辑器。
- 分别选中四个定时器逻辑节点，在右侧配置面板中，定时方式选择延迟定时，延迟/间隔时间设置为2秒。
- 将蓝图画布中的按钮1节点的点击按钮时事件与定时器逻辑节点左侧的开始计时相连，再将定时器右侧的当到计时点时与延时弹窗1节点的显示动作连线。使用同样的方法对其他三个按钮节点、三个定时器逻辑节点和延时弹窗节点一一对应连线。最终连线样式如下图所示。
最终通过连线，实现单击金蛋上方的按钮后，经过两秒钟的时间延迟后，弹窗显示对应金蛋内的奖品图片的交互功能。
步骤四：关闭奖品弹窗页面及遮挡层图片
在蓝图编辑器内，单击奖品弹窗页面内弹窗图节点，关闭奖品弹窗页面及遮挡层图片的功能。
- 在欢乐砸金蛋模板的画布编辑器中，分别选中图层栏内四个延时弹窗成组中的弹窗图组件，右键单击选择导出到蓝图编辑器。
- 再将蓝图画布中的弹窗图1节点的当单击图片时事件与延时弹窗1节点的隐藏动作连线。使用上述两个步骤的方法对其他三个弹窗图节点与三个延时弹窗和交互遮挡层节点一一对应连线。最终连线样式如下图所示。
说明 当前连线中间的串行数据处理逻辑节点是系统自动添加的，无需配置。最终通过连线，实现单击奖品弹窗页面内的弹窗图时，关闭奖品弹窗页面及遮挡层图片的交互功能。
步骤五：关闭金蛋碎裂动态图样式
在蓝图编辑器内，单击奖品弹窗页面内弹窗图节点，关闭金蛋碎裂动态图样式的功能。
- 使用同样的方法对其他三个弹窗图节点与三个金蛋-动态节点一一对应连线。最终连线样式如下图所示。
说明 当前连线中间的串行数据处理逻辑节点是系统自动添加的，无需配置。最终通过连线，实现单击奖品弹窗页面内的弹窗图时，关闭金蛋碎裂动态图样式的交互功能。