下面教大家使用axure来实现手机app里页面上下滑动特效 。
第一步:
(1)将矩形拖到名为“滑动效果”的页面中,调整好位置,设置矩形的宽为:326,高为:640,圆角半径为:38,这样完成一个手机雏形的设置 。
(2)在拖一个矩形到上面做好的图形中,设置矩形宽为:320,高为:568,调整好位置,这样一个手机平面就完成了 。
第二步:
(1)拖入一个动态面板到页面中,动态面板的大小位置与上面矩形保持一致,动态面板宽:320,高:568
(2)双击动态面板“State1”,进入到动态面板编辑状态
(3)再拖入一个动态面板到“State1”动态面板中,宽:320,高:800,并改名为:动态面板2
(4)双击“动态面板2”下的“State1”,然后在动态面板里增加6张图片,填满动态面板
(5)双击“滚动效果”页面,选中“动态面板”
(6)这一步是添加滚动效果的一步,在属性下面选择“拖动时”属性,在弹出的用例编辑框里,左侧添加动作中选“移动”,右侧配置动作选中“动态面板2”,下方移动选择“垂直拖动”
到这一步,完成了效果的制作,播放效果如下:
大家有没有发现一个bug?就是在拖动图片的时候,可以无限制的拖动,顶部底部会出现白边,这是为什么呢?是因为没有做边界的限制,下面咱们来把边界加上 。
第三步:设置滑动上方边界
(1)拖动一个热区到“滑动效果”页面,命名为“热区1”,设置宽:250,高:24,热区的位置如图所示,要与上方图片对其
(2)选中“动态面板”,选择属性里的“拖动结束时”,在弹出的用例编辑框里,选择“添加条件”,弹出的“条件设立”里,依次选择“元件范围、动态面板2、未接触、元件范围、热区1”,点击确定
(3)选择添加动作里的“移动”,选择配置动作里的“动态面板2”,选择移动里的“绝对位置”,点击确定
此时,上方边界已完成,效果如下:
大家可以看到,在往下拖动的时候,当拖到顶部时,出现空白,鼠标松开后,自动有弹回到起点,这就是上方的边界效果 。
但下方的边界还没有做,下面继续完成下方的边界 。
第四步:设置滑动下方边界
(1)拖动热区到手机屏幕底部,设置宽:250,高:24,命名为“热区2”
推荐阅读
- 把视频里面的音频转成文字 音频转写标注
- 把别人车刮了怎么走保险 刮了别人的车,该如何走保险。
- 欲把西湖比西子淡妆浓抹总相宜是什么意思 古诗淡妆浓抹总相宜的意思是什么?
- 莴笋叶能吃吗怎么才可以把莴笋叶做好吃了/
- 爆好吃的红烧猪蹄做法手把手教你做好吃美容
- 金都一号为什么是火龙果中扛把子
- 怎么把手机里的视频传到电脑上 手机上的视频怎么传到电脑上?
- 陈皮泡水的好处有哪些呢
- 怎么把手机里的视频传到电脑上 怎样把手机中的视频复制到电脑?
- 最主要原因是你家的拖把有问题