星星博客 »  > 

显示与隐藏

1、显示效果在显示隐藏里可以设置成不同的效果,先从最普通的点击显示和隐藏开始,首先你可以在Axure面板里设置好模板,我做的模板很简单,就是下图的那种。

2、上图的小图片是要设置点击显示大图片的效果,大图是要设置点击隐藏

3、设置小图的交互,点击鼠标单击时设置显示隐藏选择小图的第一张(你也可以设置随便那张,只要时点击显示和小图一样的大图就好了)然后选择小图相对应的大图,可见性为显示,动画你可以选择向左向右向上或向下,看你的模板是要怎么去做,最重要的一点是要把置于顶层,因为不置顶就会出现你点击四个过后再点击就会,大图就会出现在那些已经显示图片的底下。

4、最后一步点击大图隐藏大图,也没什么难就只是把可见性改成隐藏然后向左向右或者向上和向下就好了。显示和隐藏的设置都在下图里面。

 

5、下一个是显示隐藏的弹出效果,和前面一样先把模板做出来,就比如下图。

6、这个和上面的不一样的点只是把鼠标单击时改成鼠标移入时,鼠标移入时显示下面要显示的,可见性为显示,动画是看自己的,然后还是和上面一样把置顶选上,在更多选项选择弹出效果。如下设置。

 

7、我模板下面的选项是用鼠标单击时打开链接到当前窗口然后把链接放进去。如下

8、第三个是灯箱效果选择鼠标单击时,可见性为显示,动画自己决定,还是要置顶(置顶看自己) ,在更多效果里选择灯箱效果,灯箱效果和上面两个不一样的是,灯箱效果要设置背景色。如下

 

9、后一个推动元件,这个的模板是看自己要设置的网页效果的去做,这个有两种方法,我只说经常想到的方法,用动态面板做,分两步来做。

10、第一步在动态面板里设置两个状态,第一个状态是隐藏下面元件的,第二个状态是显示下面元件的。

11、第二步在状态里设置交互,第一个状态选择设置动态面板状态,选择状态二,勾选推动/拉动元件,方向为下方(看个人),动画为线性(看个人),第二个状态选择设置动态面板状态,选择状态一,勾选推动/拉动元件,方向为下方,动画为线性,设置到这里就可以了,是在那个点击的地方设置。如下为状态一状态二

这是我所学到显示与隐藏的步骤,分享给你们,希望可以帮助到你们。

以上就是我的分享,新手上道,请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔!

相关文章