axure7.0教程_小楼作品(十五)范围内移动_元件函数Left、Right、Top、Bottom的使用

AxureRP7.0教程 小楼一夜听春语 38962℃ 0评论

我们在制作Axure原型的过程中,有时候需要实现动态面板只能在一定范围内移动的效果,比如滑动解锁的效果就需要限制延X轴(横向)移动,并且不能超过左右边界。这种效果在Axure6.5中的实现相当复杂,除了动态面板外还需要几个额外的元件来做边界,以便动态面板接触到这些元件时候触发限制事件。不过,在Axure7.0中因为有了与元件边界相关的几个函数,这个效果就变得简单多了。下面我们就开始今天的教程,为大家讲解这种效果如何用元件函数Left、Right、Top和Bottom来实现。

本教程示例原型下载:

本教程原型效果:axure7.0教程_小楼作品(十五)范围内移动.rp

15

首先,我们照例准备元件,这次更没什么好准备的,只要准备一个大矩形和一个动态面板并设置好标签就好了。不过,为了动态面板能看见,我们需要在动态面板里面加上个同样大小的矩形并填充背景色,当然如果你不喜欢矩形这种条状的,你也可以弄成看上去比较YD的圆圆的,如果你比较BT还能弄成三角的……总之图形边界与动态面板一致就可以了。

之后,就是实现思路:

1、首先,动态面板要能拖动,并且所有的事件都在动态面板拖动时触发;

2、我们能通过大矩形和动态面板的Left、Right、Top和Bottom获取两个元件边界的坐标来判断动态面板是否超出了边界;

A如果动态面板的Left小于等于大矩形Left,说明动态面板X轴(横向)坐标小于或等于大矩形X轴坐标,也就是说,动态面板接触或者超出了左边界;

B如果动态面板的Right大于等于大矩形Right,说明动态面板X轴(横向)坐标大于或等于大矩形X轴坐标,也就是说,动态面板接触或者超出了右边界;

C如果动态面板的Top小于等于大矩形Top,说明动态面板Y轴(纵)坐标小于或等于大矩形Y轴坐标,也就是说,动态面板接触或者超出了上边界;

D如果动态面板的Bottom大于等于大矩形Bottom,说明动态面板Y轴(纵向)坐标大于或等于大矩形Y轴坐标,也就是说,动态面板接触或者超出了下边界;

3、只要动态面板超出了坐标我们就要把它弄回到紧挨边界的位置上。

 

大概知道怎么做了,我们就赶紧做吧,很爽的!

1、  添加第一个用例,不添加任何条件,只是让动态面板能够拖动就可以了;

15-1

2、  添加第二个用例,按照思路里面的A,设置条件,然后添加思路3要实现的动作。根据条件,我们知道当动态面板超越了大矩形左边界的时候,它的左边界与大矩形的左边界重合,或者在大矩形边界的左侧。这个时候,我们需要把它移动到大矩形左边界的右侧,并且紧邻大矩形左边界的位置。我们想一下,如果大矩形左边界是X坐标是10,动态面板X坐标是6,这个时候就是动态面板左边界超出了大矩形的左边界,我们要是移动动态面板的话就需要移动到X坐标11这个位置。那么,公式就是大矩形的Left(值是10)-动态面板Left(值是6)+1,结果是5,这个是我们要移动动态面板的X轴距离(相对距离)。所以,我们在条件设置完后,设置一个动作就是移动动态面板,相对距离X为(fx=[[大矩形.Left-动态面板.Left+1]])。

15-3

这里我们额外要讲一下,你在公式里写”大矩形.Left”软件是不会搭理你的,如案例中所示,我们需要点“fx”打开“编辑值”这个界面,通过设置局部变量”djx”等于部件”大矩形”,再通过”djx.Left”来实现我们要的效果。同样,”动态面板.Left”也要这样来实现。

15-4

3、第三、四、五个用例,参照第二个用例,逐一实现,需要注意的是左、右边界的公式要写在X里面,而上边界和下边界的公式是要填写到Y里面的。不要搞错了位置,否则怎么搞都不爽,很痛苦的哦。

15-2

好了,到这里制作过程就完成了,下面,就是见证奇迹的时刻!你做对了吗?


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

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

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

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


转载请注明:Axure原创教程网 » axure7.0教程_小楼作品(十五)范围内移动_元件函数Left、Right、Top、Bottom的使用

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(10)个小伙伴在吐槽
  1. 为何表达式正确却效果出不来呢?
    ch2015-03-03 15:42 回复
  2. 同楼上问 真的表达式都一模一样了 效果就是不对 看了好久都没找到原因
    小明2015-03-26 23:25 回复
  3. 同上。。
    cc2015-04-15 14:19 回复
  4. 撒旦法时代
    啊啊啊2015-04-22 12:00 回复
  5. haha
    啊啊啊2015-04-22 12:09 回复
  6. 完全一样怎么不能限制区域移动啊????
    燚天2016-05-11 10:08 回复
  7. 同问,表达式完全一样,效果出不来。不知道问题出在哪?
    仙踪1502016-06-01 22:33 回复
  8. 完美,好多效果都可以实现了
    Torments2017-04-15 13:37 回复
  9. 受用
    2017-07-18 11:22 回复
  10. 交互不是在拖动小方块时候,是鼠标移入后设置小方块跟随鼠标坐标,在限制的区域内移动
    辣哥2017-10-11 17:57 回复