5分钟玩转Axure之动态面板（进阶）

什么是动态面板

Axure官方给出的解释： 动态面板控件(Dynamic Panel)可以让你实现高级的交互功能,实现原型的高保真度。动态面板包含有多个状态(states),每个状态可包含一系列控件，任何时候都只有一个状态可见。
由上面的解释，我们可以注意到“状态”是动态面板的核心，一切的交互都是围绕着其进行展开的。这节，我们只讲解动态面板的使用，暂不插入动态面板和其它进阶控件的联用。等到进阶控件的使用都讲解完了，我会专门写一篇关于进阶控件联用的思路供大家参考。

了解动态面板

其位于左下角的功能面板中基础分类下，它的图标也很特殊，很形象的表示出其多状态管理的特点。拖出来以后点击状态就进入到默认状态里，在画布或者概要里均可以去添加和修改状态名，点击隔离指的是只显示动态面板里的内容，不显示动态面板外面的内容。

动态面板典型应用场景

1、轮播图

轮播图大家应该不陌生，随便进一个网站的首页就能查看到轮播图的示例。以csdn的首页我们可以看到如下效果：

从上面我们可以看出一个轮播图通常是以几张图片为基础进行动态切换的，当然也可以手动点击圆点或左右切换icon进行手动切换。当然实现轮播图的方式有很多，这节我们以动态面板的方式来进行展现。

• 首先需要拖出一个动态面板；
• 实现几张图片轮播，就建立几个状态。并将各图片直接放入各状态中：
• 开始设置交互事件，让其按每间隔3秒进行顺时针切换，实现可以点击圆点和icon进行切换：
  1. 首先设置交互，点击动态面板。
  2. 点击右侧功能栏的交互，并新建交互，添加动态面板事件已载入，添加设置面板状态操作：
  3. 然后贴icon和小圆点（小圆点的交互和样式你可以随便去设置，比较简单；这里为比较方便我就使用单选按钮来代替小圆点，并将且设置单选组为切换轮播图）贴上左右单角icon,如下图：
  4. 将左右切换文件夹隐藏，并对动态面板进行交互设置：鼠标移入时展示，鼠标移出时隐藏；
  5. 对左右切换单角icon进行交互设置：设置单击时，动态面板的状态进行切换；
  6. 对小圆点进行交互设置：设置单击时，小圆点的序号及对应显示动态面板的顺序；
     这样就大功告成了，一个简易的轮播图原型就完成了。演示链接我会放在文章末尾，有兴趣的同学可以试玩下。

2、动态菜单

动态菜单这块，大家应该也接触过不少。主要分为侧面菜单和顶部菜单。我们讲解下难度稍微大点的侧面动态菜单的使用。

首先我们需要达到的交互是：点击右边小箭头显示一级菜单下的二级菜单。

1. 首先同样拖出一个动态面板1命名为动态菜单；
2. 状态1里面去新建一个一级菜单组合，里面放入三个矩形；
3. 在状态1例去建立三个动态面板作为二级菜单，在二级菜单中重复步骤二去建立二级菜单。
4. 设置动态菜单的滚动条只需垂直滚动，点击动态菜单转换为动态面板，设置外面的动态面板的宽度等于动态菜单的宽度减去滚动条的宽度。即可达到隐藏滚动条的效果（这边使用双动态面板来隐藏滚动条的方式移动端应用的比较多，这种方式隐藏滚动条较为方便）。
5. 点击预览即完成效果。
   

3、tab页签切换效果

一般动态面板还可以应用于弹层效果、浮窗效果、效验等等，这些其实也可以归结于状态的改变。这边就以tab页签为例讲解下，其实换汤不换药，中心思想是一样的。只要你学会轮播图这些其实都是相通的，不过轮播图相对复杂一点，我这边在穿插这个较为简单的页签切换效果。
理解tab页签的切换思想，点击一个tab下面的内容随之改变，这边我们可以拆分为几个按钮和一个动态面板之间的交互即可。

1. 先建立两个tab页签命名为tab1和tab2
2. 拖出一个动态面板建立两个状态tab1详情和tab2详情
3. 建立交互当点击tab1是设置动态面板的状态为tab1详情；点击tab2是设置动态面板的状态为tab2详情。
   

总结

可能很多同学会发出疑惑，我为什么要用动态面板？我不是用动态面板我照样实现很多交互，感觉还很容易实现些。其实并不是非得使用动态面板来实现交互效果，具体场景具体分析。同一种交互实现的方法也不尽相同。不过在大型的系统里、在高保真原型里可能交互会比较复杂，同一个页面涉及到的状态管理也比较多，动态面板提供了比较好的状态管理，灵活使用不仅能提高绘制效率，也能提供一个清晰的页面结构和保证预览的速度。
本篇博客所做的演示