作者：学到牛牛 周磊
动态面板简介
动态面板（如图1-1所示）是Axure原型制作中使用非常频繁的一个元件，它主要用于实现动态的交互效果，它由一个或多个状态组成，每个状态就是一个页面，可以通过事件来控制动态面板的状态。
通过以下案例讲解动态面板的使用：
1、动态面板的切换
动态面板支持在同一个区域内放置多个状态的内容，每个状态的内容就如一个页面，可以使用点击事件切换不同的状态，如图2-1所示，当点击“红”按钮时，动态面板将切换到红的状态，当点击“黄”按钮时，动态面板将切换到黄的状态，点击“绿”按钮时动态面板切换到绿的状态。
具体操作
1）使用按钮元件分别创建出内容为红、黄、绿三个按钮，如图2-2所示。
2）使用动态面板元件创建动态面板，使用按钮以动态面板对齐，并分布均匀，如图2-3所示。
3）根据按钮对动态面板设置三种状态，分另为红、黄、绿，如图2-4所示。
4）分别对动态面板的不同状态设置如图2-5、2-6和2-7所示。
5）分别对红、黄、绿按钮添加点击事件，用来切换不同的动态画板状态，如图2-8和2-9所示。
2、轮播图
轮播图在同一个窗口中，通过鼠标点击、滑动或者自动加载多张图片，这些图片切换的过程就是轮播图。以下例子通过自动加载触发轮播图及图标，动态效果如图3-1所示。
具体操作
1）在页面中分别创建出两个动态面板，大概尺寸及位置如图3-2所示。
2、分别给两个动态面板创建不同的状态，如图3-3和3-4所示。
3、对轮播图模块的状态页面按图3-5内容编辑。
4）对标签的状态页面按图3-6内容编辑。
5）对整个页面设置“页面载入时”事件，如图3-7所示。
6）设置动态画板动作状态用例，如图3-8所示。
3、手机动态解锁
手机动态解锁的原型设计，通过滑动滑块，呈现解锁效果，滑块未接触到右边热区时可以左右自游滑动，在触碰到右边热区后解锁成功，进入到解锁后的界面；在解锁后的界面上点击微信图标可进入到微信“发现”页面；在整个原型中点击底部返回按钮，可以返回到解锁前的界面，动态效果如图4-2所示。
具体操作
1）创建手机模块组合，如图4-2所示。
2）创建显示内容的动态画板，并设置“滑块”、“解锁后页面”和“微信界面”三种状态，如图4-3和4-4所示。
3）制作“滑锁”状态面板的页面内容，如图4-5所示。
4）制作“解锁后页面”状态面板的页面内容，如图4-6所示。
5）制作“微信界面”状态面板的页面内容，如图4-7所示。
6）选中动态画板，设置拖动事件和碰撞到热图后的动作，如图4-8所示。
7）设置拖动时的触发条件，如图4-9所示。
8）设置触发条件后的用例，如图4-10所示。
9）设置“滑块”元件滑动效果，如图4-11所示。
10）在“解锁后页面”状态页面中设置微信鼠标点击事件，如图4-12所示。
11）设置单击微信跳转到微信页面的事件用例，如图4-13所示。
12）设置返回按钮事件，如图4-14所示。
13）设置单击“返回按钮”返回到动态面板“滑块”状态页面，如图4-14所示。
14）设置返回到到动态面板“滑块”状态页面后，将滑块元件归位，如图4-15所示。
