使用Axure RP8 模拟遮罩层显隐

模拟遮罩层显隐

实现思路

1. 拖入动态面板；命名为：主页动态面板；宽高设置为375*647（使用动态面板做基础，是因为内容超出部分会自动隐藏）
2. 双击“主页动态面板”，进入state1，拖入矩形1，绘制手机边框
3. 在“主页动态面板”中，拖入文本段落，模拟手机主页文字
4. 在“主页动态面板”中，拖入主要按钮，模拟手机主页按钮
5. 在“主页动态面板”中，拖入矩形3，宽高设置为375*647，填充透明度设置为50%，勾选隐藏，初始状态隐藏，模拟遮罩层【如图一】
6. 在“主页动态面板”中，拖入子动态面板；命名为：提示框动态面板；宽高设置为300*200，勾选隐藏，初始状态隐藏，模拟提示框【如图二】
7. 选中第4步拖入的主页按钮，设置点击事件，显示第5步的遮罩层和第6步的提示框动态面板，实现显示效果；动画选择“逐渐”，能实现过渡效果【选中元素-右侧属性-双击鼠标单击时-元件-显示/隐藏-显示-勾选所需元素，动画选择逐渐，如图三】
8. 双击“提示框动态面板”，进入state1，拖入文本段落，模拟提示信息
9. 在“提示框动态面板”中，拖入Icons-Web应用中的关闭，模拟关闭按钮
10. 在“提示框动态面板”中，拖入热区，宽高设置为50*50，覆盖在关闭按钮之上，以此提高用户使用体验，方便用户点击
11. 在“提示框动态面板”中，选中热区࿰