快好知 kuaihz

Axure RP8 教程:实现高逼格的面板切换效果

如何利用Axure RP8 教程实现高逼格的面板切换效果呢?一起来文中看看~

浏览网页时,我们经常看到整屏滚动效果的首页设计,如招商银行首页:当鼠标上下滚动时,不同页面进行翻页展示。

此教程将讲解如何实现此效果:

一、界面元件搭建

首先,拉入一个动态面板,命名为“内容”,再为其添加2个动态,为这三个状态面板的添加一些元件,(状态里面的元件内容随大家喜好自行添加,主要是演示面板的切换效果),本教程的动态面板界面效果如下:

预览效果如下:

二、交互事件实现

起初的想法,是想在【内容】动态面板上,添加【向上滚动时】和【向下滚动时】的交互事件;但是,由于面板的内容宽高是自适应的,没有出现滚动条,因此,鼠标的滚动事件无法触发。

最后想到通过添加另一个动态面板,命名为【控制面板】,设置宽高与内容面板一致,为其内容添加一个长高度的热区,即能使面板出现滚动条。再添加【向上滚动时】和【向下滚动时】的交互事件来控制【内容】动态面板的切换。效果如下:

接下来,我们只需要将此这控制面板滚动条隐藏即可,实现方法为:将此动态面板再转化为动态面板,将此动态面板的宽度减少20,即少去滚动条的宽度。最终的实现效果如下:

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:面板  面板词条  切换  切换词条  效果  效果词条  实现  实现词条  教程  教程词条  
原型

 Axure教程:明日之子投票界面...

本文以明日之子投票界面为例,拆解了其中的交互动效,并具体分析了每一个交互动效的操作步骤。最近在追明日之子每天疯狂给妹妹点赞,所以尝试下投票界面的制作,分享给大家...(展开)

原型

 技能GET:高效产出PRD的“三...

简单来说,拒绝高保真、拒绝废话、拒绝重复,把自己的时间花在产品的核心驱动力上,减少对无用功的投入,降低单调重复的操作频次,才能保证高效产出有价值的牵引力。现在业...(展开)