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

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

本教程示例原型下载：

本教程原型效果：axure7.0教程_小楼作品（十五）范围内移动.rp

首先，我们照例准备元件，这次更没什么好准备的，只要准备一个大矩形和一个动态面板并设置好标签就好了。不过，为了动态面板能看见，我们需要在动态面板里面加上个同样大小的矩形并填充背景色，当然如果你不喜欢矩形这种条状的，你也可以弄成看上去比较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、  添加第一个用例，不添加任何条件，只是让动态面板能够拖动就可以了；

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

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

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

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

本文出自 诉客 ▪ 产品经理的心声，转载时请注明出处及相应链接。

本文永久链接: http://www.soger.net/425.html