使用Axure RP8 模拟遮罩层显隐_axure矩形超出部分如何隐藏

模拟遮罩层显隐

实现思路

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. 在“提示框动态面板”中，选中热区，设置点击事件，隐藏第5步的遮罩层和第6步的提示框动态面板，实现隐藏效果；动画选择“逐渐”，能实现过渡效果【选中元素-右侧属性-双击鼠标单击时-元件-显示/隐藏-隐藏-勾选所需元素，动画选择逐渐，如图四】
12. 选中第11步设置好的单击事件，复制，回到“主页动态面板”中，选中遮罩层，选中属性-鼠标单击时，粘贴，将点击隐藏事件拷贝给遮罩层，以此提高用户使用体验，方便用户点击【如图五】
13. Axure Share 链接：https://etie8i.axshare.com
14. Axure 源文件地址：https://download.csdn.net/download/weixin_45080761/14009184

示例图

• 图一：遮罩层设置隐藏
  

• 图二：提示框动态面设置隐藏
  

• 图三：按钮绑定点击事件-显示
  

• 图四：热区绑定点击事件-隐藏
  

• 图五：复制子动态面板中热区绑定的事件粘贴至遮罩层