Axure8 实现移动端页面上下滑动效果
准备工作:1.将Rectangle(矩形)拖至画布,大小设置为w:326px h:640px,位置(0,0),圆角半径38
http://img.blog.csdn.net/20170113145153765?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15ZG9t/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
2.在拖一个矩形至画布,大小设置为w:320px h:568px 位置(3,39)
http://img.blog.csdn.net/20170113145411544?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15ZG9t/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
此时,一个建议的iPhone 5s屏幕就诞生了
http://img.blog.csdn.net/20170113145541498?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15ZG9t/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
下面步入正题
1.拖入一个Dynamic Panel(动态面板),取名First,大小设置为w:320px h:568px 位置(3,39),双击状态1
http://img.blog.csdn.net/20170113150153685?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15ZG9t/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Centerhttp://img.blog.csdn.net/20170113150222203?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15ZG9t/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
2.在状态1中继续添加动态面板,取名second,大小设置为w:320px h:800px 位置(0,0).
http://img.blog.csdn.net/20170113150400376?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15ZG9t/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Centerhttp://img.blog.csdn.net/20170113150500751?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15ZG9t/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
3.在second的状态1中,添加图片或者控件等,大小在w;320px h:800以内
4.返回到主页面(home页),单击first动态面板,在交互中双击"拖动时"后,进入case1编辑器,选择移动,勾选second,设置为垂直移动
http://img.blog.csdn.net/20170113151313037?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15ZG9t/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Centerhttp://img.blog.csdn.net/20170113151357171?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15ZG9t/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
此刻,预览下,会发现已经实现了页面的上下滑动效果,...但是,这个滑动是停不下来的,这就需要我们添加判断界限的条件,下面几步比较关键
5.在主页面(home页)拖一个热区至画布,取名hot1,大小设置w50,h10,位置(131,44)
http://img.blog.csdn.net/20170113155543244?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15ZG9t/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
接着复制hot1取名hot2,位置(131,585)
http://img.blog.csdn.net/20170113155646135?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15ZG9t/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
..相信大家已经清楚了,这两个热区将作为我们判断山下滑动界限的标志
6.还是在first的交互中,双击"拖动结束时",在case1中,点击"添加条件"
http://img.blog.csdn.net/20170113155933780?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15ZG9t/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Centerhttp://img.blog.csdn.net/20170113160158627?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15ZG9t/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
7.同时,case1的动作按下图红框中设置,到现在,就完成了滑动上方界限的限制
http://img.blog.csdn.net/20170113160404607?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15ZG9t/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
8.判断滑动的下方界限就比较麻烦了,需要简单算算坐标,在主页面(home页)中在拖一个矩形,大小设置w:320px h:800px (与second区域一样大小),并移动该控件覆盖first区域(两控件底边重合),弹出来的坐标y值就是我们需要的,记下数值,删掉矩形
http://img.blog.csdn.net/20170113160845031?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15ZG9t/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
9.在first的交互中,双击"拖动结束时",新增case2,点击"添加条件",并按下图配置
http://img.blog.csdn.net/20170113161159829?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15ZG9t/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
10,同时,case2的动作按下图红框中设置
http://img.blog.csdn.net/20170113161333534?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15ZG9t/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
11.大功告成...预览吧
效果展示
棒
页:
[1]