国产a一级毛片爽爽影院_欧美日韩亚洲中字二区在线播放_国产在线每日都有更新_日韩中文字幕tv在线看_日韩美女婬乱大片A级网站_韩国无遮免费羞羞漫画_久久亚洲精品无码播放偷妻_国产成人777爽视频_色噜噜狠狠成人中文综合18_国产精品免费高清在线观看

今天帶給大家的案例是使用 Axure 7.0（當(dāng)然 8.0 也是可以的）制作一個(gè)九宮格拼圖原型。不過(guò)本文只講述實(shí)現(xiàn)原理，不講述具體實(shí)現(xiàn)步驟，希望小伙伴們能了解思路并自己動(dòng)手去實(shí)踐，因?yàn)樗伎嫉倪^(guò)程才是最好的學(xué)習(xí)過(guò)程。

這個(gè)案例已經(jīng)構(gòu)思了很長(zhǎng)時(shí)間，中間因?yàn)闆](méi)有思路便放下了一段時(shí)間，前幾天有朋友問(wèn)我能否制作一個(gè)九宮格拼圖的原型，于是又重新思考起來(lái)。這個(gè)原型最燒腦的地方就是圖片移動(dòng)邏輯的實(shí)現(xiàn)，因?yàn)橹挥锌瘴恢苓叺膱D片才可以將其移動(dòng)到空位上。另外，這個(gè)原型有一個(gè)無(wú)解的BUG，為了實(shí)現(xiàn)圖片的隨機(jī)排列，導(dǎo)致了有時(shí)候生成的隨機(jī)圖片無(wú)法復(fù)原，也就是無(wú)論如何都拼不好，不過(guò)這種情況是隨機(jī)出現(xiàn)的，有時(shí)候也是可以拼好的。

話說(shuō)何為九宮格拼圖？不說(shuō)你已經(jīng)懂了！

預(yù)覽地址：http://raedme.cn/axurelab/010_jiugongpintu/

實(shí)現(xiàn)原理

好了，接下來(lái)就為大家解析一下這個(gè)拼圖原型的實(shí)現(xiàn)原理（后文較為枯燥，閱讀請(qǐng)謹(jǐn)慎）。

首先，是點(diǎn)擊圖片可以將圖片移動(dòng)到臨近空白區(qū)域的原理。下面我借助一個(gè)模型來(lái)講。

這是一個(gè)九宮格，在本案例中，九宮格我使用中繼器來(lái)實(shí)現(xiàn)。九宮格中 A、B、C、D、E、F、G、H 分別代表八張圖片，0 代表空白區(qū)域。此時(shí)，可以將圖片 H 或者圖片 F 移動(dòng)到 0 位置，對(duì)應(yīng)的 H 或 F 位置變成空白區(qū)域 0。之后再點(diǎn)擊和 0 相鄰的圖片，遵循相同的移動(dòng)原理。

那么問(wèn)題來(lái)了，如何判斷我點(diǎn)擊的圖片相鄰位置有一個(gè)空白區(qū)域，可以將該圖片移動(dòng)到空白區(qū)域？此問(wèn)題是該案例的核心問(wèn)題，那么我接著用一個(gè)模型來(lái)給大家講解。

在這個(gè)圖中，我為九宮格中的每個(gè)區(qū)域加一個(gè)坐標(biāo)，用（x，y）來(lái)表示，這一步是實(shí)現(xiàn)該原型的關(guān)鍵步驟。然后我們來(lái)分析一下每個(gè)區(qū)域之間坐標(biāo)的關(guān)系。

比如 F 區(qū)和 0 區(qū)之間的關(guān)系，H 區(qū)和 0 區(qū)之間的關(guān)系，其實(shí)就是空白區(qū)域和它相鄰四周的區(qū)域的坐標(biāo)關(guān)系。我們可以任意假設(shè)一個(gè)區(qū)域?yàn)榭瞻讌^(qū)域，然后分析它上側(cè)、下側(cè)、左側(cè)、右側(cè)區(qū)域的（x，y）坐標(biāo)。經(jīng)過(guò)分析之后，我們可以得出一個(gè)結(jié)論。

可以用一個(gè)表達(dá)式來(lái)表達(dá)：

|0.x-相鄰區(qū)域.x|+|0.y-相鄰區(qū)域.y|=1

翻譯一下就是：0 區(qū)域的 x 值減去相鄰區(qū)域的 x 值的絕對(duì)值加上 0 區(qū)域的 y 值減去相鄰區(qū)域的 y 值的絕對(duì)值等于 1。反過(guò)來(lái)推也成立，就是如果兩個(gè)區(qū)域的（x，y）坐標(biāo)分別求差的絕對(duì)值然后再相加等于 1 的話，那么這兩個(gè)區(qū)域一定是相鄰的區(qū)域。

通過(guò)以上邏輯，我們可以判斷相鄰區(qū)域（上下相鄰 or 左右相鄰），這非常重要。然后我們?cè)倥袛嘁幌孪噜弲^(qū)域的其中一個(gè)是否為空白區(qū)域，如果是空白區(qū)域，那么點(diǎn)擊另一個(gè)區(qū)域的時(shí)候，就可以將其移動(dòng)到相鄰的空白區(qū)域；如果不是空白區(qū)域，那么點(diǎn)擊無(wú)效。

舉例說(shuō)明：

當(dāng)我點(diǎn)擊 H 區(qū)域的時(shí)候，首先要尋找它的相鄰區(qū)域，通過(guò)前面介紹的表達(dá)式（|0.x-相鄰區(qū)域.x|+|0.y-相鄰區(qū)域.y|=1）我們可以得到 H 區(qū)域的相鄰區(qū)域?yàn)?E、G、0（不要說(shuō)你一看就知道，你一看就知道，但是中繼器在運(yùn)行的時(shí)候是不知道的，只能通過(guò)邏輯判斷來(lái)獲得）。

然后再判斷這些相鄰區(qū)域中是否有一個(gè)區(qū)域是空白區(qū)域，這個(gè)我們可以通過(guò)給中繼器的數(shù)據(jù)集中加上一個(gè)標(biāo)記字段來(lái)標(biāo)記空白區(qū)域，這一步的實(shí)現(xiàn)較為簡(jiǎn)單。

這個(gè)例子中可以得知空白區(qū)域是 0 ，因此可以將 H 移動(dòng)到 0 區(qū)域。

如果點(diǎn)擊的區(qū)域是 E，那么其相鄰的 4 個(gè)區(qū)域中就找不到空白區(qū)域，因此點(diǎn)擊區(qū)域 E 就不會(huì)發(fā)生移動(dòng)。

好了，基于以上邏輯，就可以實(shí)現(xiàn)九宮格拼圖的核心功能了——點(diǎn)擊圖片移動(dòng)到相鄰的空白的區(qū)域，如果相鄰沒(méi)有空白區(qū)域，就不移動(dòng)。

但是接下來(lái)還有另外一件事情就是，如何使拼圖圖片可以隨機(jī)排列，并且每次原型載入時(shí)排列的順序都不一樣。

這 一效果的實(shí)現(xiàn)我在以前的案例中都有講過(guò)，可以通過(guò)給中繼器的數(shù)據(jù)集增加一個(gè)排序字段，然后給排序字段賦值為隨機(jī)數(shù)，之后為中繼器增加排序。因?yàn)槊看沃欣^器 數(shù)據(jù)集中的每行數(shù)據(jù)的排序字段的值都不一樣，所以每次排序的結(jié)果會(huì)不一樣。但是在本案例中需要考慮到要把空白區(qū)域始終排在最末尾，因此該數(shù)據(jù)項(xiàng)的排序字段 需要做一個(gè)特殊的處理。

到這里九宮格拼圖的主要實(shí)現(xiàn)邏輯就講完了，不知道小伙伴們能否看得懂。具體的實(shí)現(xiàn)步驟，小伙伴們勇敢的去探索吧。

作者：大鵬，微信：urmagic，可一起交流原型設(shè)計(jì)問(wèn)題，歡迎騷擾。

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