动态面板是Axure的核心功能之一，但很多初学者反馈说很难理解。 今天用一个简单的例子，让大家快速掌握它，记住制作常用的轮播图。
12月21日更新：本站视频版教程： Axure动态面板入门，轮播图形效果_哔哩哔哩((((((干杯(~-bilibili www.bilibili.com
首先理解概念。 动态面板是什么？ 有什么用？
动态面板是将多个页面“按状态”组合成一个组件，并以某种“动作”驱动显示。
此图是Axure动态面板的图标，非常适合。
有三个“状态”(states )面板“灰色/黑色”(gray/black blue )，用于控制“动作”(Action )将具体显示哪些状态。
因此，动态面板=状态面板动作
案例开始： Banner轮播图形
一.添加基本部件
1 .在左侧工具栏中，拖动动态面板进入编辑区域，并将其命名为banner
2 .通过添加五个操作按钮并将其放在动态面板上，还可以适当美化效果。 下面的三个按钮将成为原型，侧面为矩形，透明度将调整为更真实。
2 .设置面板状态
1 .双击动态面板符号，弹出动态面板以安装弹匣。 在这里，您可以看到“动态”面板具有三种状态。 您可以在此添加状态或编辑状态。
在此双击State1将其选中，然后编辑State1。
2 .进入2.state1的编辑状态后，可以看到标题的选项卡名称已更改，变为banner/State1。 这表示banner动态面板下的state1状态。 在此状态下，编辑内容属于此状态，与其他状态或外部控件无关。
我们很容易编辑，制作背景色，添加文字说明，并将其用作第一个banner图。
三.添加动作(底部按钮) )。
1、首先在底部的" 123 "按钮中添加页面切换，选中1号按钮，双击右侧的onClick事件
2、在弹出的事件编辑器中，选择" Widgets--Set Panel State "，在右侧的“动作设置”栏中选择设置面板，然后单击的选择状态是否为State1(第一页)
3、通过同样的操作，设定按钮2为state2，设定按钮3为state3，设定结束后可以预览效果。
单击123按钮可以在三个不同的banner之间切换。
三.添加动作(左右切换按钮)
1、接下来在左右按钮上添加动作。 首先选择右侧的箭头按钮【】，添加onClick事件。
2、在弹出的事件编辑器中，依次选择SetPanelState，选中Set banner state，然后在Select State中单击右侧的下拉菜单，选择Next，再单击
3、同样操作，左侧翻页按钮【' /
设置完成后，可以预览效果，然后单击左右按钮在页面之间切换。
动态面板的基础操作介绍到此结束，简单总结一下，
“动态”面板的中心作用是通过事件控件在面板中显示不同的页面内容。
使用步骤：
1、添加用于生成“动态面板”元件和动作的按钮
2、在动态面板上为每个state设置不同的内容
3、设置按钮切换操作，控制不同页面的显示
四、面板切换视频(左右翻页按钮) ) ) ) ) ) )。
刚才完成了基本的动态面板切换，但还不完美。 页面切换还不熟练，用户体验不足。 作为产品经理我怎么能允许这个？ 来参加切换视频吧。
(本分会与事件相关知识，如果不明白请查看本人的其他文章) )。
1、首先设置左右翻页按钮的面板切换动画
选择按钮【】，双击右侧已经添加的事件，进入事件编辑器。
2、在“事件编辑器”的右下角，修改动画效果，并将其设置为【slide left】(左幻灯片)。
3、同样，按钮【' /
完成设置后，预览效果，单击左右按钮，使页面平滑滑动~
五.面板切换视频(第123页按钮)。
最后，在下面的123页按钮中添加翻页效果。 这里包含一些小逻辑和变量，所以有点复杂。 不懂的人请参考本人的其他文章。
首先，让我们分析一下123按钮的动画切换逻辑：
每次切换动画时，都用上一页的值进行判断
上一页是s
tate1时，点击按钮2，页面应该“向左滑”②上一个页面为state2时，点击按钮1，页面应该“向右滑”
所以这里我们要做两件事情：
1、记录每次页面切换后的state值(这里我们用自带的全局变量onLoadVariable记录)
2、每个case中增加对state值的判断，根据不同的值显示不同的动画。
下边开始操作：
1、使用onLoadVariable记录每个页面的state值，这里我们假设state1~3分别是1~3
为按钮1~3分别添加一个动作Set Variable Value，三个按钮分别设置value为1,2,3，这样点击这三个按钮后，就可设置变量为对应的值。
【效率提高】：
在设置三个按钮时，为了快速操作，可以使用“事件复制”功能，使用方法如下。
在做好的一个事件上点击鼠标右键，然后选择Copy，在目标事件上再选择Paste。
(win操作系统下，ctrl+c，ctrl+v也是可以的，但要注意粘贴后修改对应的值。)
2、为每个按钮增加case条件判断，选中按钮1，双击右侧的case1
3、弹出的“事件对话框”中，点击按钮【add condition】添加条件判断。事件对话框
4、弹出的“条件对话”框中，依次如下操作：
①点击【+】添加一个判断条件
②选择判断类型为【value of variable】然后选择【OnLoadVariable】
③选择判断依据为【is greater than】，后边的value设置为1条件对话框
设置完毕后，点击ok按钮，保存，这时我们回到 事件编辑器中就可以看到case1下方增加了一些描述信息，这个就是代表这个case的条件(当变量OnLoadVariable>1时)
变量大于1时，我们希望页面切换是向右滑动的，所以接下来设置一下向右滑动。
点击之前已经设定好的set banner to state，增加一个动画。
同样的，我们设置按钮2和按钮3，按钮3模式的模式和按钮1一样，这里不再重复。
这里要注意的是按钮2，它的条件中既有大于2，又有小于2，所以需要添加两个case
(使用复制粘贴简单修改一下值即可，修改后如下图，按钮2的两个case)
至此，底部按钮的切换操作完成了，可以点击预览运营一下试试，是不是很完美了？
其实还有问题，就是左右按钮切换+底部翻页按钮配合的时候会有问题，因为左右按钮并未设定state变量的值，我们把它设定上即可。
打开【>】按钮的事件编辑器，添加事件【Set Variable Value】，在右侧勾选，并在右下角选择value为[[OnLoadVariable+1]]，(每次点击按钮变量自动+1)。
【
最后运行一下，banner切换非常完美，大功告成。
喜欢请点赞支持~~
---------------------------------
Axure快速入门系列教程：