社交APP中流行左滑右滑的效果來(lái)查看他人簡(jiǎn)短的頁(yè)面資料，若二者感興趣，會(huì)出現(xiàn)匹配。那么我們?cè)撊绾瓮ㄟ^(guò)Axure實(shí)現(xiàn)交友APP滑動(dòng)匹配效果？本文對(duì)此進(jìn)行了探討分析，一起來(lái)看看吧。

前言

社交APP很多人都用過(guò)吧，目前流行一種讓用戶瀏覽圖片和簡(jiǎn)短的個(gè)人資料，向左或向右滑動(dòng)屏幕上的圖片，表示他們是否對(duì)某個(gè)人感興趣。如果兩個(gè)人都對(duì)彼此感興趣，就會(huì)出現(xiàn)“匹配”，他們可以開(kāi)始聊天交流。今天帶大家仿一個(gè)滑動(dòng)匹配的原型。

一、演示

老規(guī)矩，先上演示：

二、說(shuō)明

本教程只講授此功能的核心交互，有以下幾點(diǎn)：

• 前中后三張圖片的大小、位置、層級(jí)調(diào)整。
• 滑動(dòng)圖片時(shí)應(yīng)該怎樣旋轉(zhuǎn)。
• 圖片旋轉(zhuǎn)角度解決滿足條件時(shí)怎么處理。
• 圖片旋轉(zhuǎn)角度不足怎么歸位怎么回正。

其它的動(dòng)態(tài)效果請(qǐng)自行增加。

三、準(zhǔn)備工作

需要先準(zhǔn)備以下元件：

一個(gè)用來(lái)右滑代表匹配成功時(shí)顯示的矩形（起名：匹配），填充一個(gè)暗的背景色，透明度50%，文本就“匹配”吧，再用個(gè)醒目文本顏色，隱藏起來(lái)。

一個(gè)用來(lái)刷新的矩形（起名：刷新），同樣隱藏。

一個(gè)中繼器，數(shù)據(jù)有兩列，一列叫[[Item.image]]插入圖片，一列叫[[Item.isShow]]代表是否顯示，設(shè)置為分頁(yè)顯示，每頁(yè)項(xiàng)數(shù)量為3。

• 中繼器第一層放一個(gè)大點(diǎn)的動(dòng)態(tài)面板（起名：人物），取消“適應(yīng)內(nèi)容”，背景顏色直接透明。
• 動(dòng)態(tài)面板里再放一個(gè)動(dòng)態(tài)面板，位置最好居中一些（起名：滑動(dòng)）。是我們主要交互的元件。
• 這個(gè)“滑動(dòng)”動(dòng)態(tài)面板里面放一張圖片。

元件結(jié)構(gòu)是下圖這樣的，有朋友可能已經(jīng)注意到了，中繼器外面套了一個(gè)(組合)，后面講原因：

中繼器的數(shù)據(jù)圖片請(qǐng)自備，最好先按教程來(lái)，我的演示圖片寬高為300px * 400px，[[Item.isShow]]列都寫(xiě)true。

四、教程

開(kāi)始寫(xiě)交互了，先從“匹配”矩形開(kāi)始，這個(gè)簡(jiǎn)單，“單擊時(shí)”隱藏自身：

“刷新”矩形的交互是“單擊時(shí)”刷新頁(yè)面，這里是因?yàn)槲以谧龅谝话鏁r(shí)發(fā)現(xiàn)了一個(gè)中繼器篩選會(huì)導(dǎo)致拖放交互失效的BUG，已提交給Axure官方確認(rèn)了，所在刷新頁(yè)面是目前兼容性最好的方法。

中繼器的交互有點(diǎn)多，但是也不難理解，主要是設(shè)置圖片大小、位置、層級(jí)。我已經(jīng)都標(biāo)清楚了，請(qǐng)看下圖：

這里有三點(diǎn)需要注意：

1. 設(shè)置圖片尺寸時(shí)，錨點(diǎn)要選“頂部”這樣后面的移動(dòng)可以無(wú)需計(jì)算。
2. 移動(dòng)“人物”動(dòng)態(tài)面板是為了把所有的圖片都放在一起。
3. 把“人物”置底是為了按中繼器的順序排好層次。

關(guān)鍵的“滑動(dòng)”動(dòng)態(tài)面板的交互來(lái)啦！

依次詳細(xì)解釋一下：

拖動(dòng)時(shí)：

• 讓圖片跟隨鼠標(biāo)移動(dòng)
• 向右移TotalDragX為正時(shí)要逆時(shí)針轉(zhuǎn)，向左移TotalDragX為負(fù)時(shí)要順時(shí)針轉(zhuǎn)，所以用了[[-TotalDragX]]，順時(shí)針轉(zhuǎn)負(fù)的角度就是逆時(shí)間嘛。除以5是鼠標(biāo)每移5個(gè)像素，讓圖片才旋轉(zhuǎn)1度。

旋轉(zhuǎn)時(shí)：

如果右滑逆時(shí)針超過(guò)7度（順時(shí)針低于-7度）：

• 顯示“匹配”矩形，前面已經(jīng)設(shè)置過(guò)“點(diǎn)擊時(shí)”隱藏了。
• 圖片向右下方移動(dòng)100像素，并逐漸隱藏。
• 更新當(dāng)前行[[Item.isShow]]為False，不再顯示。

如果左滑順時(shí)針超過(guò)7度：

• 圖片向左下方移動(dòng)100像素，并逐漸隱藏。
• 更新當(dāng)前行[[Item.isShow]]為False，不再顯示。

拖放結(jié)束時(shí)（沒(méi)有觸發(fā)“旋轉(zhuǎn)時(shí)”說(shuō)明拖動(dòng)幅度不夠大，需要?dú)w位，角度回正）

如果當(dāng)前順時(shí)針轉(zhuǎn)了：

• 回到原來(lái)位置
• 逆時(shí)針回到0度

如果當(dāng)前逆時(shí)針轉(zhuǎn)了：

• 回到原來(lái)位置
• 順時(shí)針回到360度

告訴大家一個(gè)小技巧：

中繼器如果篩選到一個(gè)都不顯示了，那么中繼器的“每項(xiàng)加載時(shí)”就根本不會(huì)觸發(fā)。那怎樣知道中繼器已經(jīng)篩選空了呢？這時(shí)外面那個(gè)（組合）就起作用了，也要添加交互的：

這時(shí)把“刷新”矩形顯示出來(lái)就好了呀。

這樣一個(gè)交友APP滑動(dòng)匹配效果就制作完成了，可自行在放大圖片、成功匹配等環(huán)節(jié)加入更多絢麗的動(dòng)效。