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

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

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

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

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

将动态面板置为最前

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

移动动态面板

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

Example1-延时移动

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

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

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

Example2-抽屉效果

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

例子在AxureRP5.5版本下调试通过

点此查看演示

点此下载源文件



无觅相关文章插件,快速提升流量

“AxureRP教程–动态面板高级应用”3 条评论

初学者 | 2011-07-22 17:45 |
commenter

可能原理是这些原理,实际应用中又会千变万化的,这个动态面板是功能挺多的

commenter

基本上有需要移动、需要小页面切换显示,需要先隐藏后显示等效果的时候,都需要使用动态面板组件.

commenter

抽屉效果,需要对逻辑很清楚,特别是最后一步要设置状态转换