小楼axure 图文教程(十五)智能手机的拖动效果

AxureRP6.5教程 小楼一夜听春语 54553℃ 0评论

本教程Axure原型下载:小楼axure 图文教程(十五)智能手机的拖动效果

现在使用axure rp制作手机APP原型的同学越来越多,移动APP中面板拖动的效果是非常普遍的,看到很多同学对这个很迷茫,就用这个教程为大家答疑解惑好了。

首先,我们还是进行元件的准备:

1、 从小楼Axure元件库1.0中拖出一个IPHONE4竖屏元件,放到主页中。这个元件除了已经做好的手机外壳图片还放置了一个内部框架。我们双击内部框架将链接指向页面1。这样我们在页面1中编辑的内容就能够在主页的内部框架中显示了。

2、 我们根据需求更改一下页面1的名称,在这里我们叫它叫“拖动面板”,在这个页面中我们拖入一个矩形,宽度设置为278(主页中内部框架的宽度),高度随意(这里设置成700),并转换成动态面板;然后设置动态面板的标签,标签也根据需求来命名,在这里我们叫它“内容面板”。动态面板状态1中我们可以放进去一些内容,以便明显的看到拖动效果。

3、 一般情况下,手机都会有一个头部的导航栏和底部的菜单栏,在这里我们在拖动面板的这个页面中放置两个矩形并输入文字来代表他们。宽度278,高度40就差不多了。然后给他们写上标签。分别为“顶部导航”和“底部菜单”。导航的矩形左上顶点位置0,0就可以了。菜单的矩形左上顶点位置为0,389,为什么是389呢?因为主页的框架高度是429,所以菜单矩形的左上定点就是框架高度-矩形高度:429-40=389。

4、 这个时候我们把动态面板的左上顶点位置改为0,39。做为动态面板的起始位置。为什么?因为上面被导航矩形盖住了。并且0,40是与顶部导航不接触的,会造成无法拖动动态面板。

5、 我们还需要确定往上拖动动态面板到什么时候停止,停止的时候动态面板的左上定点的位置在哪里。所以我们需要进行计算,公式就是:停止位置y值=-(动态面板的高度-底部菜单y值)=-(700-389)=-311。也就是说无论如何向上拖动,只要动态面板离开了底部菜单的元件范围,动态面板都要停止在到0,-311的位置。

好了,理论讲完了,看看如何实现吧!

1、 因为是竖屏,所以我们要在拖动面板的时候让动态面板沿着Y轴移动,也就是只能纵向的上下拖动。用例1-“拖动限制”:拖动动态面板时-移动面板“拖动面板”-Y轴移动。

2、 在拖动过程中,如果动态面板离开了“顶部导航”,要让动态面板回到0,39的位置。用例2-“向下拖动”:拖动动态面板时-if “拖动面板”未接触 “顶部导航”的元件范围,移动面板“拖动面板”到绝对位置0,39。

3、 在拖动过程中,如果动态面板离开了“底部菜单”,要让动态面板回到0,-321的位置。用例2-“向上拖动”:拖动动态面板时-if “拖动面板”未接触 “底部菜单”的元件范围,移动面板“拖动面板”到绝对位置0,-321。

4、 我们知道手机上拖动面板时不能拖动的时候会有弹回的效果,那么我们只要在用例2和用例3的事件动作“移动面板”之前加上等待50毫秒就可以了。

5、 记得在动态面板拖动的事件中,每一个用例都是要执行的,所以不存在执行某个就不执行某个,也就是说没有ELSE IF的存在。所以当我们添加用例的时候(用例2、用例3)系统的默认条件设置是ELSE IF,我们需要点右键切换成IF,不然就会无法实现目标效果了。

15


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 小楼axure 图文教程(十五)智能手机的拖动效果

喜欢 (30)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(13)个小伙伴在吐槽
  1. 这个案例不错,非常实用,并且解析透彻。楼老师,多谢!!
    岱岱2013-08-22 15:14 回复
  2. 作者,问一下这个多出来的页面怎么隐藏呀,
    jason2014-02-26 23:23 回复
    • 小楼一夜听春语
      哪个多出来的?
      小楼一夜听春语2014-02-27 11:12 回复
      • 就是菜单页下面那一部分,是不是直接上面盖一层矩形就可以了
        老巨爸爸2014-05-22 21:50 回复
  3. 这个案例不错,非常实用,解析透彻。楼老师,多谢了!!
    kahn1782014-05-16 10:56 回复
  4. 虽然花了很长时间,总算搞掂了。但是有一点遗憾的就是弹回动作不能完美实现,即便是加了10S,也不行。
    hlj2014-09-12 00:20 回复
  5. 实验得知,这个间隔等待的时间可以再长一些会更理想,比如300毫秒
    hlj2014-09-12 00:24 回复
  6. 应该是有个 错误! 您说的是内部框架指向的是页面1(你给它的标签是拖动面板), 在下面的交互用例里“移动拖动面板y轴拖动”就是说移动的是个页面???而不是动态面板? 你做的时候标签应该是 页面1是“内容面板” 动态面板是“拖动面板”。写教程的时候可能写反了吧? 不知道是不是这样哈? 💡 axure初学者,也在网上看老师的教程。说错了,老师莫怪啊! 😛
    nemo2015-03-25 21:59 回复
    • 小楼一夜听春语
      没有写反,主页中添加的框架指向的一个叫“拖动面板”(这个只是页面名称,不是动态面板,之前叫“页面1”)的页面,在这个页面里放了一个矩形转为了动态面板,这个面板是动态面板,因为里面放内容,所以叫“内容面板”,这个“内容面板”是被拖动的动态面板。
      小楼一夜听春语2015-03-26 13:02 回复
  7. 对着学学会了,很实用!谢谢!
    减字木兰花2015-10-16 15:48 回复
  8. 可以共享 rp 源文件不?
    54sharkbin2015-11-20 10:52 回复
  9. 作者,问一下这个多出来的页面怎么隐藏呀
    aaa2016-07-07 11:17 回复