AxureRP教程–百叶窗效果

在网上看到一个七屏百叶窗的脚本效果,感觉很酷很炫,可以应用在产品展示页面上,也可以用来做首页的导航展示,就想到能否用AxureRP来实现,抽空做了一下,虽然不尽如人意,但演示的话能达到90%的效果,在此和大家分享一下制作方式。

百叶窗效果和抽屉式菜单效果有点像,需要通过控制动态面板的移动来实现,抽屉式菜单还能通过结合动态面板状态切换来实现,百叶窗如果也切换状态的话就会很复杂,这里全部都是用移动的方式来实现的。难点在于鼠标移入移出的效果控制上,需要移入移出来控制整个效果的收缩延展;另外个比较难的地方是动态面板移动时的坐标定位,感觉AxureRP 6的坐标定位不是很准确,调试的时候很费了一番功夫,最后是通过加了标示符才搞清楚它到底是怎么移怎么定位的。因为AxureRP 6的动态面板移动加了很多的过渡效果,因此这个例子用AxureRP 6来设计实现。

百叶窗效果的实现原理是通过控制鼠标的移入移出事件来控制不同展示页面的切换,展示页面需要有默认的显示格式,以及展示时完全展开和完全收缩时的样式,因为百叶窗样式有多层页面,可以利用这个特性,来使各层页面相互覆盖,从而达到隐藏不显示部分的目的。例子是五屏百叶窗,通过用五个动态面板来做展示,五个图片映射组件的鼠标移入事件来控制动态面板的移动,并增加了一排导航按钮来手动浏览效果,个人觉得这个效果用鼠标单击事件比用鼠标移入事件要容易控制的多。

之所以截这个设计界面的图,是因为这个图可以让大家清楚的看到我的设计布局,五个动态面板是层叠放置的,而五个图片映射组件的放置则是隔开了一段距离的,这是因为收缩之后显示的宽度就这么宽。

设计上需要注意点的一点就是用来控制鼠标移入事件的图片映射组件要跟着动态面板的移动而移动,否则就没法实现效果了,因此图片映射组件也是要用动态面板包起来的,也就是说,在移动的时候要控制两组动态面板分别移动,这里建议大家在调试的时候加点标示符,特别是像图片映射组件这种生成原型之后是透明效果的,不加标示符根本就不知道自己的设定使它移到哪里去了,这里要说的一点是,个人感觉AxureRP 6.0.2899这个版本的坐标绝对定位方式有点问题,不知道其他的6版本有没有这个问题。调试的时候最好先调一屏的效果,第一屏的效果调好了,正确了,后面就相对比较简单了。

这是最终的效果,从收缩效果上大家可以看出为啥前面要设计那个宽度了,还是有点问题。第一个问题就是我设计里所说的,动态面板的过渡效果有时间区间,比如说1秒,在这个时间区间里面要是触发了其他事件,就会导致效果异常,因此最好等移动效果停下来了再移动鼠标;第二个问题是没有想到鼠标移出后复原的解决办法,这里加了一个0状态导航,就是回到初始状态的。

如果熟知设计实现过程的,拿这个去演示,应该是能演示出百叶窗的效果的,中间的瑕疵就留待各位高手来解决了,期待大家集思广益,能够最终做出一个较为完美的效果,上面没有说清楚的请大家参见演示文件和源文件好了。

有问题或意见,大家可回复提出,或者到IT民工论坛上提出。

示例在AxureRP 6下调试通过。

七屏百叶窗JS效果

点此查看演示

点此下载源文件 发布在IT民工论坛–高级技巧



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

“AxureRP教程–百叶窗效果”2 条评论

commenter

文章是几天前就写好的,现在想了一下还是可以还原状态的,在四周都加上一个图片映射组件,设置一个鼠标移入事件是让其还原到初始状态的,这样就可以还原了,HOHO。不过这个办法有点投机取巧,呵呵,大家有没有更好的办法推荐,提前祝大家新年快乐!

士大夫 | 2013-03-25 13:20 |
commenter

谢谢是想想