动态面板的特性能够隐藏、显示、切换和移动原型线框图中的内容。本课程学习动态面板的基础交互属性，如显示和隐藏页面内容。查看高级动态面板设置学习高阶交互设计。

动态面板概述
动态面板是将多个包含其它设计部件的状态或图形组合到一起的部件。动态面板可以隐藏、显示和移动。当前显示的图形可以被设置为动态的。在原型功能演示时，可以模拟出自定义消息提示框、幻灯片播放、标签控制、拖拽内容等交互效果。理论上来说，原型中任何地方的都可以通过使用动态面板被显示、隐藏、切换和移动。在Axure使用过程中，会慢慢发现动态面板是原型部件中使用频率最高的部件之一。

动态面板状态
动态面板包括一个或多个状态，每个状态都是可以包括其它部件的图形。在同一时间只有一个动态面板的状态可以设为可见。在交互设置时，可以设置动态面板隐藏或是显示，同时设置当前显示状态。
添加并调整动态面板尺寸，拖入动态面板部件到线框图并拖动边线的控制点调整大小。动态面板的大小决定了用户在线框图中看到的动态面板中的状态边界。
提示：己经添加在线框图中的部件，如果想转换为动态面板，可以用“转换为动态面板”属性快速实现。选中希望转换为动态面板的部件，右键部件，快捷菜单选择“转换->转换为动态面板”。选中部件自动转换为一个新建的动态面板，部件位于动态面板的状态1。

添加并设计动态面板状态

通常情况下，动态面板是空的。所以要在动态面板的状态中设计相应的内容（部件）。双击动态面板，打开动态面板状态管理。
在管理面板中，可以添加、删除、重命名、重新排序和打开状态编辑页面。状态1是动态面板的默认状态。
从状态列表中选中一个状态，点击“编辑状态”，打开状态编辑页面。


在状态编辑页面，有蓝色虚线轮廓线.轮廓线代表动态面板的大小以及状态的可见区域。拖入相应的部件到状态编辑页，设计状态内容。
可滚动区域：为动态面板添加滚动条，右键动态面板，快捷菜单选择“编辑动态面板->按需显示垂直滚动条和水平滚动条”。如果设计内容（部件）超出了轮廓线，在原型中，动态面板自动显示滚动条。

默认隐藏动态面板

动态面板可以设置为默认隐藏。右键动态面板，快捷菜单选择“编辑动态面板->设为隐藏”。
动态面板一但设置为隐藏，蓝色覆盖层将变为黄色。

动态面板管理

动态面板管理窗口显示线框图中添加的所有动态面板。同时在动态面板窗口可以管理己添加的动态面板。当一个页面中大量使用了动态面板，动态面板窗口对于设计者快速有效查找、使用动态面板是非常有效的导航窗口。
窗口还提供了在线框图中隐藏动态面板功能，方便设计者更容易的选择页面中那些可能在动态面板下面的部件。
还有另一个功能是排列出页面中的母板。
如果在设计区看不到动态面板管理窗口，点击主菜单中的“视图->动态面板管理”，显示动态面板管理窗口在设计区。

使用动态面板管理

添加或删除状态，选择动态面板或状态名称，点击动态面板管理窗口工具栏的“添加状态”按钮。也可以右键动态面板或状态名称，在快捷菜单选择添加状态。
打开状态编辑页面，双击面板状态或选择动态面板或状态，点击“编辑全部状态”按钮，打开动态面板的所有状态页面。右键动态面板，在快捷菜单中也可以打开状态编辑页面。


在线框图中不显示动态面板，点击动态面板名称右边的蓝色方形按钮。不显示所有页面中的动态面板，右键页面名称，选择“全部隐藏”。当动态面板覆盖了其它部件，或与其它部件重叠时，可以使用这个功能。
注意：动态面板管理窗口的面板隐藏与将动态面板设置为默认隐藏，两个操作是不同的。

动态面板的交互设置
一旦在线框图中使用了动态面板。就可以在动态面板事件中添加用例，设置用例动作来添加面板交互，动态面板可以使用的用例动作包括：设置面板状态为指定状态、切换面板可见性、显示面板、移动面板、隐藏面板、将面板置于顶层、将面板置于底层。
复习一下动态面板的基本交互，如：显示/隐藏面板、设置面板状态为指定状态、将面板置于顶层。移动面板事件会在下一课：高级动态面板设置中讨论。

设置动态面板状态

创建带多个状态的动态面板，设置“设置面板状态为指定状态”动作将面板切换到特定状态。在用例编辑器中，在动作列表中选择动作并选择页面中的动态面板。一旦选择了动态面板，可以设置面板切换的状态。可以在一个动作中设置多个动态面板的状态。
“设置面板状态为指定状态”动作常用于选项卡设计、点击按钮或下拉选单选择变化时切换一个显示区的内容。（后面案例详细说明）

显示/隐藏/切换面板可见性

使用“显示面板”和“隐藏面板”动作显示和隐藏当前面板状态内容。用例编辑器中，选择动作并选择页面中的动态面板，在页面设计时，对动态面板命名，可以在这一步时更容易找到需要设置的动态面板。在同一个动态中可以选择多个面板被显示或隐藏。
使用“切换面板可见性”动作，设置动态面板在显示和隐藏两个动作之间切换。
这些动作多用来设计如：可以显示/隐藏的错误提示信息。（后面案例详细说明）

移动面板

“移动面板”动作可以将页面内容动态的移动到设定移动像素的位置或特定的页面位置。希望移动的内容设置到动态面板中，添加触发交互的事件用例（如：添加一个用例为点击按钮移动面板）。
在用例编辑器中，选择“移动面板”动作，并选择要移动的动态面板。用例编辑器的第4步：配置动作，设置动态面板移动相对位置到X轴和Y轴的像素距离，或者可以设置面板到绝对位置的X轴和Y轴的像素距离。
这个动作常被用于可展开和折起的面板，移动面板内容达到显示或隐藏内容效果。（后面案例详细说明）

将面板置于顶层/将面板置于底层

当原型显示时需要动态面板显示在最顶层，而在设计中动态面板位于其它部件的下面。使用“将面板置于顶层”动作。这个动作将动态面板设置到页面中其它部件的最上面。用例编辑器中，选择动作并配置动态面板。在一个用例中，可以设置多个面板置于顶层。“将面板置于底层”正好相反是。
这个动作常被用于创建light灯箱、弹出式导航菜单和自定义提示面板中，特别是动态面板中有母板，且母板设置行为为放置在背景中时。（后面案例详细说明）

动画和过渡效果

设置移动动态面板（内容）的动画效果和显示和隐藏面板时显示淡入淡出效果相同。提示：动画设置简单，让原型变得生动。但对于开发者来说，也许并非如此。：）
设置“移动面板”动作，选择过渡效果：摆动、弹跳并设置动画持续时间。
当设置显示面板、隐藏面板或切换面板可见性，可以设置淡入淡出效果。
设置面板状态为指定状态，可以设置进行和退出动画效果：淡入淡出或滑动