Axure新手养成计划(连载30)

Axure书籍 小楼一夜听春语 15637℃ 0评论

2.4.  拖动

动态面板是Axure中唯一一个能够被拖动的元件。任何元件想要有被拖动的效果,都要放置在动态面板中。

如果需要让一个动态面板被拖动,必须在动态面板的触发事件【拖动时】中添加用例动作,【移动】动态面板为某一种拖动行为。动态面板的拖动行为包括:拖动(自由拖动)、水平拖动和垂直拖动。

案例:水平滑块

我们制作一个能够水平拖动的滑块,并且在拖动时不得超出标尺两端。(图156)

156

(图156)

我们用矩形做一个标尺,并在两端分别用矩形做好左边界“left”和右边界“right”,然后用矩形改变为圆形并转为动态面板,作为滑块“slider”。当拖动滑块时,滑块能够水平移动。并且在移动过程中,如果触碰到两端边界要停留在指定的位置上。

首先,我们先让滑块能够被拖动。双击动态面板的触发事件【拖动时】,添加用例动作【移动】,勾选动态面板“slider”或者“当前元件”,选择【移动】列表中的选项“水平拖动”。(图157)

157

(图157)

      然后,继续添加用例,判断拖动时是否超出了边界,如果超出了让滑块移动到指定位置上。

以左侧边界为例,矩形“left”的X轴坐标为150,宽度为10,如果滑块接触到左侧边界的矩形,我们就要让滑块移动到X轴160的位置上。因为是水平移动,Y轴坐标不会改变,仍然是当前滑块的Y轴坐标20。而滑块接触到右侧边界时,要移动到的位置是右侧边界矩形的X轴坐标-滑块的宽度。右侧边界矩形“right”的X轴坐标为560,减去滑块的宽度20,结果是540。Y轴的坐标同样是20。

(图158)

158

(图158)

      了解了边界限制滑块的原理,我们就来添加判断和相应的用例动作。仍以左侧边界为例:

1、双击动态面板“slider”的【拖动时】事件打开用例编辑界面,然后点击【添加条件】,设置条件内容为【元件范围】“slider”接触【元件范围】“left”;(图159)

159

(图159)

2、设置满足条件时的动作为【移动】“slider”,移动【到绝对位置】x轴“160”y轴“20”。(图160)

160

(图160)

      3、设置当满足条件【元件范围】“slider”接触【元件范围】“right”时,【移动】“slider”【到绝对位置】x轴“540“y轴”20“。

4、将动态面板“slider“的触发事件【拖动时】中所有的用例的条件判断,全部切换为If。


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

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

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

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


转载请注明:Axure原创教程网 » Axure新手养成计划(连载30)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(15)个小伙伴在吐槽
  1. 第一个用例没有添加条件,会变成if true,无条件执行。 最终生成文件后有一个小问题,如果拖动滑块拖得太猛,滑块会跑出左右两端标尺的限度。
    一默如雷2015-09-24 09:16 回复
    • 那怎么办呢?
      凤凰涅槃2015-10-07 15:15 回复
      • 打开第一个用例编辑界面,然后点击【添加条件】,设置条件内容为【元件范围】“slider”未接触【元件范围】“left” 点击加号+ 设置条件内容为【元件范围】“slider”未接触【元件范围】“right” 这样可以让小球在两个小方块之间滑来滑去,但是猛地用力还是会把小球拖出去 😈
        后入丈母娘2015-10-10 10:51 回复
        • 小楼一夜听春语
          别那么猛,否则真的会出去。通过元件接触进行判断是这节内容所讲的知识点之一,而实际上可以通过函数进行判断,掌握了这个知识点就可以了,不用过于计较。
          小楼一夜听春语2015-11-19 20:50 回复
    • 你好,问下你这问题解决了吗?我也刚开始学习~
      路小鹿2015-11-18 11:33 回复
    • 我也是。。。。。拖出去了
      锵锵2015-11-19 16:33 回复
  2. 并不会把小球拖出去,这种情况如果发生就是坐标错误
    锵锵2015-11-19 16:37 回复
  3. 小楼一夜听春语
    统一做个回复吧。这节内容是为了讲解可以判断元件范围的这个知识点。大家只要知道元件是否接触可以通过此种条件类型判断就行了。实际上,如果通过函数来限制边界是怎么都不会出去的。所以大家不用纠结这个例子会被拖出去的情况。另外还有一种办法是通过在两端加上长一些的透明元件(比如热区、透明矩形)进行限制,也拖不出去。
    小楼一夜听春语2015-11-19 20:53 回复
  4. 没看明白之前各位说的是什么,我按照例子做了,不会拖出去的。
    banban2015-12-17 21:46 回复
  5. 感谢楼哥的教程!
    飘荡的IT--HU2016-03-29 20:42 回复
  6. 直接在移动时设置边界更简单一些,而且不会出现猛滑动时出界的现象,一个case就完成了,没必要3个if
    slyvia2016-04-19 17:25 回复
    • 怎么做?
      lulu2016-11-18 14:18 回复
      • 拖动时,设置条件如果slider未接触left和right,添加用例移动slider水平拖动,添加边界左侧>=160,右侧<=560
        xiaoming2016-12-05 10:55 回复
  7. 为什么我做的拖不动呢 按照步骤来的
    小小羊2016-12-05 15:15 回复
    • 我之前也是按照步骤来的,能拖动的啊
      xiaoming2016-12-06 15:05 回复