本篇文章通過(guò)原型設(shè)計(jì)工具為大家演示了9宮格拼圖效果，看完后別忘了自己動(dòng)手做一下！

效果圖

使用工具

Axure RP 9 beta 繪制原型

Camtasia 2018 錄屏及導(dǎo)出gif

Adobe Photoshop CC 2017 處理圖片

實(shí)現(xiàn)邏輯

函數(shù)使用：

1. [[Math.abs( )]]：取絕對(duì)值
2. &&：代表“且”，a&& b 表示a與b均返回true才返回true
3. || ：代表“或”，a||b 表示a或b任一一個(gè)返回true就返回true，否則返回false
4. [[this.x]]：元件當(dāng)前橫坐標(biāo)位置
5. [[this.y]]：元件當(dāng)前縱坐標(biāo)位置

邏輯描述

以上是本案例使用的函數(shù)，接下來(lái)介紹實(shí)現(xiàn)小圖塊移動(dòng)的邏輯：（下邊內(nèi)容繁雜，不愿意閱讀的同行可以直接下載原型研究哈）我們知道，拼圖游戲在操作的過(guò)程中，是空白位置相鄰的圖片移動(dòng)到空白位置，我們?cè)O(shè)置每個(gè)小圖塊長(zhǎng)寬均為100，那么不難發(fā)現(xiàn)，可以移動(dòng)到空白位置的圖片坐標(biāo)距離空白圖片坐標(biāo)距離為100，那么我們?cè)谠O(shè)置移動(dòng)條件的時(shí)候，就以圖片距離為依據(jù)。

假定某張圖片的坐標(biāo)為（100,200），空白圖片的坐標(biāo)為（0,200），（X1-X2）^2+（Y1-Y2）^2=兩圖片距離^2，按照這樣的公式可以判斷圖片與空白圖片的距離是否為100，考慮到這樣的公式很難在Axure內(nèi)表達(dá)，因此我們簡(jiǎn)化公式：

X1-X2=±100且Y1-Y2=0時(shí)→圖塊可移動(dòng)

X1-X2=0且Y1-Y2=±100時(shí)→圖塊可移動(dòng)

否則，圖塊無(wú)法移動(dòng)，此時(shí)當(dāng)鼠標(biāo)單擊元件時(shí)，判斷是否符合移動(dòng)條件，移動(dòng)條件轉(zhuǎn)化為Axure語(yǔ)言就是：

[[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是我們?cè)O(shè)置的局部變量，具體含義下文繼續(xù)描述。

圖片移動(dòng)的邏輯基本成型，接下來(lái)說(shuō)說(shuō)如何記錄空白圖片的位置：我們畫出四個(gè)框，命名為X，Y，X*100，Y*100，分別代表當(dāng)前空白位置的位置及坐標(biāo)，坐標(biāo)我們用距離表示，位置我們用0、1、2表示，如下圖所示，圖片的坐標(biāo)和位置可以一一對(duì)應(yīng)：

上圖中寫出了四個(gè)方塊的位置和坐標(biāo)，其他的以此類推。下面也就是最后的記錄方式了，記錄方式在這里不啰嗦，大家自行下載原型相信很容易便可以理解。

另外，如何打亂圖片本次先不做教程，下期再行補(bǔ)充。

實(shí)現(xiàn)步驟

1. 新建動(dòng)態(tài)面板，用于放置九宮格圖片。
2. 接下來(lái)……算了，啰里啰嗦的描述，自己看著都累了，直接上截圖

選擇第一張圖片

鼠標(biāo)單擊時(shí)，IF

設(shè)置文本：

其中，lx為元件X的元件文字，ly為元件Y的元件文字。設(shè)置文本，

移動(dòng)：

其中，lx為元件X*100的元件文字，ly為元件Y*100的元件文字。?為八個(gè)圖塊設(shè)置同樣的交互即可，X、Y、X*100、Y*100的初始值就是初始空白圖塊的值，應(yīng)此（X，Y）=（2,2），（X*100，Y*100）=（200,200）

OVER，拼圖已經(jīng)做完。

總結(jié)

拼圖游戲看似已經(jīng)做完了，其實(shí)呢，美中不足，差一步：當(dāng)我們拼完圖后，想打亂重新來(lái)一次，有木有，無(wú)法打亂，那么怎么辦呢，本期先留下一點(diǎn)小懸念，我們下期再出如何打亂圖片的RP。

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

提取碼：v7c7

本文由 @王得宇A(yù)IPM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議