Axure RP8 | 动态面板-容器

动态面板：能够在一个固定的区域切换显示的内容。能实现很多动态效果。
其本身是一个透明的元件。一个动态面板里有若干个【状态】。“若动态面板是幻灯片的放映机，而状态则是幻灯片。” 打开状态的编辑界面，即可放置各种各样的元件，组成内容。
有几种特性：容器、多状态、拖动、循环、适应宽度、相对固定。

动态面板-容器：能够让装载的内容有统一的动作。实现多个元件的统一移动或现实隐藏。

场景一：登录面板的灯箱效果

1. 准备工作

制作背景图，预想点击【下载PSD】则弹出【登录面板】

背景

在空白处制作【登录面板】，然后全选，右键-转换为动态面板

转换为动态面板

把【登录面板】放在【背景图】中间，并【置于顶层】，勾选【隐藏】

登录面板

2. 热区

把热区拖到按钮位置，并添加用例【鼠标单击时】-【显示】- 选择LoginPanel -【灯箱效果】

添加用例

在动态面板LoginPanel中的关闭按钮添加用例【鼠标单击时】-【隐藏】- 选择LoginPanel

关闭按钮

如果想取消动态面板，想增加一些内容的话，选中动态面板-右键-从首个状态中脱离

image.png

其他
只要是多个元件需要统一显示/隐藏，都能够用动态面板/组合实现

场景二：水平菜单移入时弹出隐藏效果

1. 准备工作

制作一个“一级菜单”，下方放置数个矩形作为“二级菜单”，并全选【二级菜单】，右键，转换为动态面板，命名为Submenu，状态为隐藏

菜单

2. 添加用例

选中【一级菜单】，添加用例【鼠标移入时】-【显示】- 选中动态面板Submenu -【弹出效果】
（弹出效果能够实现鼠标在一级菜单和二级菜单的范围内时，二级菜单保持显示；当鼠标离开，二级菜单自动隐藏）
动画可自由选择

添加用例

场景三：垂直菜单单击时展开，再次单击时收起

1. 准备工作（与上述场景的准备工作一样）

2. 添加用例

选中“一级菜单”，添加用例【鼠标单击时】-【切换可见性】- 选中动态面板 - 勾选【推动/拉动元件】
（推动/拉动元件（以默认的向下为例）：展开二级菜单向下推动其他菜单，收起二级菜单拉起下方其他菜单的效果）

添加用例

3. 预览

把做好的全选（包括“一级菜单”和“二级菜单”）并复制放在下方

复制

预览，达到效果

预览

3. 尝试

同样，我尝试了使用两个用例想要达到点击一次【显示】二级菜单，再点击一次【隐藏】二级菜单的效果，如下图

image.png

结果是不行的

预览

或者一个用例里弄两个动作，也是不行的。所以一定要用【切换可见性】

image.png