axure8破解安装教程(把汉化补丁放到游戏目录)

下面教大家使用axure来实现手机app里页面上下滑动特效。

第一步:

(1)将矩形拖到名为“滑动效果”的页面中,调整好位置,设置矩形的宽为:326,高为:640,圆角半径为:38,这样完成一个手机雏形的设置。

使用Axure8来实现手机APP里的页面上下滑动效果

(2)在拖一个矩形到上面做好的图形中,设置矩形宽为:320,高为:568,调整好位置,这样一个手机平面就完成了。

使用Axure8来实现手机APP里的页面上下滑动效果

第二步:

(1)拖入一个动态面板到页面中,动态面板的大小位置与上面矩形保持一致,动态面板宽:320,高:568

使用Axure8来实现手机APP里的页面上下滑动效果

(2)双击动态面板“State1”,进入到动态面板编辑状态

使用Axure8来实现手机APP里的页面上下滑动效果

(3)再拖入一个动态面板到“State1”动态面板中,宽:320,高:800,并改名为:动态面板2

使用Axure8来实现手机APP里的页面上下滑动效果

(4)双击“动态面板2”下的“State1”,然后在动态面板里增加6张图片,填满动态面板

使用Axure8来实现手机APP里的页面上下滑动效果

(5)双击“滚动效果”页面,选中“动态面板”

使用Axure8来实现手机APP里的页面上下滑动效果

(6)这一步是添加滚动效果的一步,在属性下面选择“拖动时”属性,在弹出的用例编辑框里,左侧添加动作中选“移动”,右侧配置动作选中“动态面板2”,下方移动选择“垂直拖动”

使用Axure8来实现手机APP里的页面上下滑动效果

到这一步,完成了效果的制作,播放效果如下:

使用Axure8来实现手机APP里的页面上下滑动效果


大家有没有发现一个bug?就是在拖动图片的时候,可以无限制的拖动,顶部底部会出现白边,这是为什么呢?是因为没有做边界的限制,下面咱们来把边界加上。

第三步:设置滑动上方边界

(1)拖动一个热区到“滑动效果”页面,命名为“热区1”,设置宽:250,高:24,热区的位置如图所示,要与上方图片对其

使用Axure8来实现手机APP里的页面上下滑动效果

(2)选中“动态面板”,选择属性里的“拖动结束时”,在弹出的用例编辑框里,选择“添加条件”,弹出的“条件设立”里,依次选择“元件范围、动态面板2、未接触、元件范围、热区1”,点击确定

使用Axure8来实现手机APP里的页面上下滑动效果

(3)选择添加动作里的“移动”,选择配置动作里的“动态面板2”,选择移动里的“绝对位置”,点击确定

使用Axure8来实现手机APP里的页面上下滑动效果

此时,上方边界已完成,效果如下:

使用Axure8来实现手机APP里的页面上下滑动效果

大家可以看到,在往下拖动的时候,当拖到顶部时,出现空白,鼠标松开后,自动有弹回到起点,这就是上方的边界效果。

但下方的边界还没有做,下面继续完成下方的边界。

第四步:设置滑动下方边界

(1)拖动热区到手机屏幕底部,设置宽:250,高:24,命名为“热区2”

使用Axure8来实现手机APP里的页面上下滑动效果

(2)拖动一个矩形到“滚动效果”界面,设置宽:320,高:800,后面这一点比较重要,将矩形与手机中图片重叠,如下图:

使用Axure8来实现手机APP里的页面上下滑动效果

(3)往上移动矩形,使矩形的底部与手机中图片底部重叠,然后记录下y坐标值:-154,然后删除该矩形(添加该矩形只是计算底部y值使用)

使用Axure8来实现手机APP里的页面上下滑动效果

(4)点击“动态面板”,双击“拖动结束时”,添加相关条件,同设置上方滑动边界。注意:“热区2”的选择,如下图:

使用Axure8来实现手机APP里的页面上下滑动效果

(5)选择添加动作里的 “移动”,配置动作里选择“动态面板2”,移动中选择“绝对位置”,y值填写刚才计算出来的:-154

使用Axure8来实现手机APP里的页面上下滑动效果

这样,下方边界已经完成。

看下效果:

使用Axure8来实现手机APP里的页面上下滑动效果

怎么样,效果是不是很酷^_^

(0)
仰望辉煌。  的头像仰望辉煌。  

相关推荐

发表回复

登录后才能评论