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

Axure RP 9 beta 绘制原型

Camtasia 2018 录屏及导出gif

Adobe Photoshop CC 2017 处理图片

实现逻辑函数利用： [[Math.abs( )]]：取绝对值&&：代表“且”，a&& b 表示a与b均返回true才返回true|| ：代表“或”，a||b 表示a或b任逐一个返回true就返回true，否则返回false[[this.x]]：元件当前横坐标位置[[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，X100，Y100，分别代表当前空缺位置的位置及坐标，坐标我们用间隔表示，位置我们用0、1、2表示，如下图所示，图片的坐标和位置可以逐一对应：

上图中写出了四个方块的位置和坐标，其他的以此类推。
下面也便是末了的记录办法了，记录办法在这里不啰嗦，大家自行下载原型相信很随意马虎便可以理解。

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

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

选择第一张图片

鼠标单击时，IF

设置文本：

个中，lx为元件X的元件笔墨，ly为元件Y的元件笔墨。
设置文本，

移动：

个中，lx为元件X100的元件笔墨，ly为元件Y100的元件笔墨。
为八个图块设置同样的交互即可，X、Y、X100、Y100的初始值便是初始空缺图块的值，应此（X，Y）=（2,2），（X100，Y100）=（200,200）

OVER，拼图已经做完。

总结

拼图游戏看似已经做完了，实在呢，美中不敷，差一步：当我们拼完图后，想打乱重新来一次，有木有，无法打乱，那么怎么办呢，本期先留下一点小悬念，我们下期再出如何打乱图片的RP。

原型文件下载链接：https://pan.baidu.com/s/14L_Vi-Azvg8k5eV2jMQBHw

提取码：v7c7

Good Bye！
！
！

本文由 @PM Silence 原创发布于大家都是产品经理。
未经容许，禁止转载

题图来自Unsplash，基于CC0协议