Axure RP9：使用中继器制作折叠菜单

Posted 2023-05-09

参考技术A   菜单为二级菜单，样式如下图：

  “一级菜单”的样式相对于“二级菜单”多了两个图标（首页、右侧箭头），所以我们通过中继器设置菜单时，还需要根据菜单级别做样式判断。
  点击“一级菜单”时，需要对“一级菜单”下的所有“二级菜单”进行隐藏，所以还需要判断菜单的隐藏与展示。
  综上所述，设计中继器表格如下：

  首先我们添加中继器，之后修改样式如下：

  之后点击中继器，并增加交互“Item Loaded”，如下图：

  至此，我们的菜单展示效果就做好了，如下图：

  接下来，我们做二级菜单的选中效果，首先需要在“中继器”交互面板中勾选“Isolate Radio Groups”，如下图：

之后，设置二级菜单的选中效果，如下图：

再设置菜单的点击交互事件，如下图

  至此，二级菜单选中效果设置完毕。
  最后，我们设置“一级菜单”的点击效果，也就是点击后，将隐藏该“一级菜单”下的所有“二级菜单”。

  ok，大功告成，可以将菜单设置为模块模版，方便在各个页面中使用。同时如果需要打开链接，可以在菜单的点击事件中增加打开链接事件。后续改变菜单项可以在中继器的Data中配置，十分方便、高效。

Axure RP 9 教程：9宫格拼图如何制作

效果图

 

使用工具

Axure RP 9 beta 绘制原型

Camtasia 2018 录屏及导出gif

Adobe Photoshop CC 2017 处理图片

 

实现逻辑

函数使用：

1. [[Math.abs( )]]：取绝对值
2. &&：代表“且”，a&& b 表示a与b均返回true才返回true
3. || ：代表“或”，a||b 表示a或b任一一个返回true就返回true，否则返回false
4. [[this.x]]：元件当前横坐标位置
5. [[this.y]]：元件当前纵坐标位置

 

逻辑描述

以上是本案例使用的函数，接下来介绍实现小图块移动的逻辑：（下边内容繁杂，不愿意阅读的同行可以直接下载原型研究哈）我们知道，拼图游戏在操作的过程中，是空白位置相邻的图片移动到空白位置，我们设置每个小图块长宽均为100，那么不难发现，可以移动到空白位置的图片坐标距离空白图片坐标距离为100，那么我们在设置移动条件的时候，就以图片距离为依据。

假定某张图片的坐标为（100,200），空白图片的坐标为（0,200），（X1-X2）^2+（Y1-Y2）^2=两图片距离^2，按照这样的公式可以判断图片与空白图片的距离是否为100，考虑到这样的公式很难在Axure内表达，因此我们简化公式：

X1-X2=±100且Y1-Y2=0时→图块可移动

X1-X2=0且Y1-Y2=±100时→图块可移动

否则，图块无法移动，此时当鼠标单击元件时，判断是否符合移动条件，移动条件转化为Axure语言就是：

[[Math.abs(This.y/100-ly)==0 && Math.abs(lx-This.x/100)==1 || Math.abs(This.y/100-ly)==1 &&Math.abs(lx-This.x/100)==0]]

其中，lx和ly是我们设置的局部变量，具体含义下文继续描述。

图片移动的逻辑基本成型，接下来说说如何记录空白图片的位置：我们画出四个框，命名为X，Y，X*100，Y*100，分别代表当前空白位置的位置及坐标，坐标我们用距离表示，位置我们用0、1、2表示，如下图所示，图片的坐标和位置可以一一对应：

上图中写出了四个方块的位置和坐标，其他的以此类推。下面也就是最后的记录方式了，记录方式在这里不啰嗦，大家自行下载原型相信很容易便可以理解。

另外，如何打乱图片本次先不做教程，下期再行补充。

 

实现步骤

1. 新建动态面板，用于放置九宫格图片。
2. 接下来……算了，啰里啰嗦的描述，自己看着都累了，直接上截图

选择第一张图片

鼠标单击时，IF

设置文本：

其中，lx为元件X的元件文字，ly为元件Y的元件文字。设置文本，

移动：

其中，lx为元件X*100的元件文字，ly为元件Y*100的元件文字。为八个图块设置同样的交互即可，X、Y、X*100、Y*100的初始值就是初始空白图块的值，应此（X，Y）=（2,2），（X*100，Y*100）=（200,200）

OVER，拼图已经做完。