Question

AxureRP教程–动态面板高级应用

Answer 1

　　顾名思义，这个交互事件是用来设置动态面板的二维坐标位置的，应用频率较高，在需要更改某部分内容的位置时，都需要使用这个功能，与AxureRP的其他功能配合使用，如变量等，会做出很多效果。本文是一篇关于动态面板高级应用的文章。我们一起来了解下，希望对您有所帮助。

　　前面介绍了动态面板的基本应用，通过设定不同的状态页面和按钮的单击事件，来完成小页面切换的效果，适用于TAB标签，图片轮换等效果。前面只应用到了动态面板的一个交互事件，即切换动态面板的显示状态，不过这也是最常应用到得状态，本文介绍动态面板的其他几种交互事件，包括显示动态面板，隐藏动态面板，切换动态面板可见属性，移动动态面板和将动态面板置为最前。

　　在主页面上添加两个动态面板，一个为有产品，活动，新闻三个状态的动态面板Paneltest，一个为只设置一个测试状态的`Paneltest2，分别做好初始化的设置，并将Paneltest2的默认显示设置为隐藏。

　　显示动态面板，隐藏动态面板和切换动态面板可见属性

　　前面两项在动态面板的自身属性里面就能设置，在已添加的动态面板上右键—编辑动态面板，可看到设为可见和设为隐藏两个选项。这三项交互事件都是用来设置动态面板是否可见的，第三项就是当动态面板隐藏时将其设为可见，当动态面板可见时将其设置为隐藏，设置比较简单，选择了交互事件后再选择目标动态面板即可，不做过多介绍，一般应用在设置隐藏菜单，隐藏交互效果上，如隐藏的下拉式表单，隐藏的交互式提醒等。

　　将动态面板置为最前

　　这个与设置动态面板的可见属性有点类似，用来设置动态面板的显示层级，在同一片区域内有多部分内容重叠的时候，就可以用这个交互事件来设置当前的最顶层显示，这个设置也比较简单，选择好目标动态面板即可，一般应用不多，设计页面的时候不会有太多重叠内容，设置日期控件的时候会碰到，带选择日期功能的，另一种可能情况就是需要有覆盖功能的。

　　移动动态面板

　　顾名思义，这个交互事件是用来设置动态面板的二维坐标位置的，应用频率较高，在需要更改某部分内容的位置时，都需要使用这个功能，与AxureRP的其他功能配合使用，如变量等，会做出很多效果。移动动态面板分定位(to(x,y))和位移(by(x,y))两种，前者依据AxureRP自带的标尺来精确定位，后者则是根据设定的位移值来上下左右移动，都以像素为单位。设置时先选择目标动态面板，再选择移动方式，最后设置移动坐标或位移值。常见应用于流水线式的动态效果，抽屉式交互效果，可伸缩式导航菜单等，如常见的循环滚动展示效果，可用于图片展示。

　　Example1-延时移动

　　这个是例子是演示通过一个开关的控制，使设置页面是否展示出来的效果，动态面板会逐渐移动来实现延时的效果，首先设计一个设置页面，比如添加两个复选框组件设置复选功能，再添加一个动态面板覆盖在设置页面上，并设置一个状态页面，上面为提示性文字，再添加一个动态面板作为开关，设置两个状态，一个为打开设置，一个为关闭设置，这里也可以用按钮来控制，为了增加开关的可切换效果，采用了动态面板。

　　初始化完成之后，设置开关的交互事件，分别选择移动动态面板，其中“打开设置”是使面板向下移动，“关闭设置”是使面板向上移动，这里采用位移的方式，需要注意的是，AxureRP的画布上标尺是朝右下的坐标轴，因此向下移动是正值，向上移动是负值。这里也可以用定位的方式做，不过会比位移的方式复杂很多，需要计算当前坐标。

　　其实也可以用是否将面板设置为最前来达到相同的效果，即将设置页面也做成一个动态面板中的一个状态页 ，然后通过切换是否前置来完成效果，不过这样就没有延时的效果了。

　　Example2-抽屉效果

　　这个例子的实现原理与第一个例子差不多，是别人制作分享的，这里拿来举个例子，有兴趣的可以自己看源文件。