AxureRP教程–渐隐渐显效果

渐隐渐显效果在应用当中会给人比较炫的感觉,可以逐渐的清晰出现,也可以逐渐的模糊隐藏,实际网站设计当中也比较常见,特别是提示性的隐蔽窗口。用AxureRP来设计这个效果,实际上也是利用了人眼的视觉差,前面在介绍伸缩效果的时候也有讲到视觉差的应用,通过设置动态面板恰当的状态页内容和等待时间,来达到某种效果。

若要达到渐隐渐显效果,在等待时间上的设置也是要考虑的,这个基本上不再做介绍,页面设计上是有点特别之处的。要说渐隐渐显效果的实现原理,说白了其实很简单,只是一般人都想不到这个方式。就是通过设置多个页面的透明度和页面转换的等待时间,来达到渐隐渐显效果。

等待时间的设置大家都知道了,页面透明度的设置,其实就是设置组件的显示透明度。这里例子当中每个页面的设计内容其实都是一样的,只不过背景的显示透明度不一样而已。本例采用一个圆角矩形来做背景,并填充为黑色,就在填充颜色设置页面的最下面还有一个透明度设置的选项,可直接设置输入框的数值,也可通过拖动滚动轴来设置,0代表不透明,100代表完全透明。

这里通过设置动态面板的5个状态页面,再设置各个状态页背景的透明度分别为100,80,60,40,20五个数值,然后通过控制显示状态页的顺序来达到是先显示还是先隐藏,以此来达到渐隐渐显效果,具体设置详见源文件。

这个效果说白了其实是很简单的,就看有没有想到是用这样的设置方式而已。可见AxureRP提供的各个功能,如果能善加利用,都是可以做出好效果的,就看有没有去细心观察,有没有去思考了。对AxureRP熟悉,也并不代表就熟知其每个功能的应用,把所知转变为应用是一个很难的过程,真正转变成功了,就能创造出成果。

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

 

点此查看演示

点此下载源文件



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

“AxureRP教程–渐隐渐显效果”有1条评论

chen | 2012-08-28 21:22 |
commenter

😆 感谢分享