AxureRP教程–伸缩效果

用AxureRP来实现伸缩延展的效果需要采用动态面板来实现,前面我也有说到过,基本上有需要移动、需要小页面切换显示,需要先隐藏后显示等效果的时候,都会用到动态面板组件,伸缩效果就是用了小页面切换显示的原理,实际上是利用了用户的视觉差,真正说开了就是比较简单的,当然啦,前提是已经对动态面板组件的功能特性比较熟悉了。

伸缩效果顾名思义就是可以在需要是展开,不需要是收缩的情况,或者是反过来也可以,常见应用于侧边栏的导航,客服应用,以及最近应用很广的分享插件功能,一般默认都是收缩着的,需要的时候通过点击或者鼠标移入将其展开。这种效果用动态面板来实现可以有两种方式,一种是上面提到过的利用动态面板状态小页面切换显示来实现,另一种是利用动态面板的移动特性来实现,两种方式其实都是利用了用户的视觉差,真正拆开来讲会发现其实原理是比较简单的,但我们要实现的只是伸缩效果,至于实现方式和实现手段,呵呵,只要达到效果了就可以了,下面就介绍一下两种实现方式。

首先是采用动态面板状态小页面切换显示来实现。这种方式的实现原理是通过设计多个小页面,每个页面分别是实例展开过程当中的一个阶段,拼凑起来按顺序显示这些页面,就会在视觉上造成实例在展开的效果,收缩的时候则将显示顺序倒过来。比如要实现把1逐步变成1111,可以设计四个小状态页面,第一个页面显示1,第二个页面显示11,第三个页面显示111,第四个页面显示1111,然后设置4个状态页面在触发条件下按顺序显示,并在每个状态页面切换过程当中设置一定的等待时间,就会达到从1变成1111的展开效果,反之需要收缩的时候,只要将显示顺序反过来,就会有从1111变成1的收缩效果。这里需要注意的是等待时间不能设置的过长,要让显示能比较平顺又不至于有停顿感。

这里是设计了一个邮件联系的效果,这个例子不是我自己做的,借用别人设计的实例来说明伸缩效果。实现点击侧边栏的邮件联系,展开发送邮件的页面,发送完毕之后可以收回去的功能。一共设计了5个状态页面,每个页面显示的内容和大小都是不一样的,造成一个阶梯展开的效果,具体的页面设计就不说明了,相信大家看一下源文件就明白了,中间的等待时间是50毫秒。

第二种方式是利用动态面板的移动特性来实现。这种方式的实现原理是将完整的实例隐藏于某个部件下,然后在触发条件下,设置合适的等待时间,逐步的依靠动态面板的位移功能,逐步将隐藏的实例显示出来,这个动态面板只要设计一个状态页面就可以了,根据动态面板的大小来决定每次的位移量,比如是从上往下展开,动态面板的高度是500,那就可以将Y轴的位移量等分成5份,每次Y轴位移100,X轴不动;左右移则动X轴,Y轴不动;斜向移动的时候X轴和Y轴都要同时动,这个比较难控制。这种方式较之第一种有两个缺点,一是预先设计好的动态面板要先隐藏或者不显示;二是只能往某单一方向移动。但在特定的情况小,这两个缺点也能很好的被忽略,看应用是否得当了。

第二种方式的实现就不演示了,大家可以自己尝试一下。伸缩效果最常用于侧边栏和下拉式效果,当然不排除有向上展开和向四周同时展开的情况,呵呵,比如在相册应用里,就会有向四周同时展开的效果,这种只能用第一种方式来实现,个人见解,大家可以共同探讨。

演示示例在AxureRP 5.5版本下调试通过

 

点此查看演示

点此下载源文件



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

“AxureRP教程–伸缩效果”2 条评论

品牌 | 2011-08-6 17:07 |
commenter

看来你很注重你的个人品牌哦。努力加油!

commenter

赞楼主,无私奉献了这么多教程。