舟山網(wǎng)站建設(shè)500元（axure的交互）axure rp8交互功能，
原標(biāo)題：Axure實(shí)現(xiàn)交友APP滑動(dòng)匹配效果社交APP中流行左滑右滑的效果來查看他人簡短的頁面資料，若二者感興趣，會(huì)出現(xiàn)匹配那么我們?cè)撊绾瓮ㄟ^Axure實(shí)現(xiàn)交友APP滑動(dòng)匹配效果？本文對(duì)此進(jìn)行了探討分析，一起來看看吧。
前言 社交APP很多人都用過吧，目前流行一種讓用戶瀏覽圖片和簡短的個(gè)人資料，向左或向右滑動(dòng)屏幕上的圖片，表示他們是否對(duì)某個(gè)人感興趣如果兩個(gè)人都對(duì)彼此感興趣，就會(huì)出現(xiàn)“匹配”，他們可以開始聊天交流今天帶大家仿一個(gè)滑動(dòng)匹配的原型。
一、演示 老規(guī)矩，先上演示：
二、說明 本教程只講授此功能的核心交互，有以下幾點(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è)用來右滑代表匹配成功時(shí)顯示的矩形（起名：匹配），填充一個(gè)暗的背景色，透明度50%，文本就“匹配”吧，再用個(gè)醒目文本顏色，隱藏起來一個(gè)用來刷新的矩形（起名：刷新），同樣隱藏一個(gè)中繼器，數(shù)據(jù)有兩列，一列叫 。
[[Item.image]]插入圖片，一列叫 [[Item.isShow]]代表是否顯示，設(shè)置為分頁顯示，每頁項(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)自備，最好先按教程來，我的演示圖片寬高為300px * 400px，[[Item.isShow]]列都寫true。
四、教程 開始寫交互了，先從“匹配”矩形開始，這個(gè)簡單，“單擊時(shí)”隱藏自身：
“刷新”矩形的交互是“單擊時(shí)”刷新頁面，這里是因?yàn)槲以谧龅谝话鏁r(shí)發(fā)現(xiàn)了一個(gè)中繼器篩選會(huì)導(dǎo)致拖放交互失效的BUG，已提交給Axure官方確認(rèn)了，所在刷新頁面是目前兼容性最好的方法。
中繼器的交互有點(diǎn)多，但是也不難理解，主要是設(shè)置圖片大小、位置、層級(jí)。我已經(jīng)都標(biāo)清楚了，請(qǐng)看下圖：
這里有三點(diǎn)需要注意：設(shè)置圖片尺寸時(shí)，錨點(diǎn)要選“頂部”這樣后面的移動(dòng)可以無需計(jì)算移動(dòng)“人物”動(dòng)態(tài)面板是為了把所有的圖片都放在一起把“人物”置底是為了按中繼器的順序排好層次關(guān)鍵的“滑動(dòng)”動(dòng)態(tà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í)針超過7度（順時(shí)針低于-7度）：顯示“匹配”矩形，前面已經(jīng)設(shè)置過“點(diǎn)擊時(shí)”隱藏了圖片向右下方移動(dòng)100像素，并逐漸隱藏更新當(dāng)前行 [[Item.isShow]]。
為False，不再顯示如果左滑順時(shí)針超過7度：圖片向左下方移動(dòng)100像素，并逐漸隱藏更新當(dāng)前行 [[Item.isShow]]為False，不再顯示拖放結(jié)束時(shí)（沒有觸發(fā)“旋轉(zhuǎn)時(shí)”說明拖動(dòng)幅度不夠大，需要?dú)w位，角度回正）。
如果當(dāng)前順時(shí)針轉(zhuǎn)了：回到原來位置逆時(shí)針回到0度如果當(dāng)前逆時(shí)針轉(zhuǎn)了：回到原來位置順時(shí)針回到360度告訴大家一個(gè)小技巧：中繼器如果篩選到一個(gè)都不顯示了，那么中繼器的“每項(xiàng)加載時(shí)”就根本不會(huì)觸發(fā)那怎樣知道中繼器已經(jīng)篩選空了呢？這時(shí)外面那個(gè)（組合）就起作用了，也要添加交互的：。
這時(shí)把“刷新”矩形顯示出來就好了呀這樣一個(gè)交友APP滑動(dòng)匹配效果就制作完成了，可自行在放大圖片、成功匹配等環(huán)節(jié)加入更多絢麗的動(dòng)效本文由 @Jorkin 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載題圖來自 Unsplash，基于 CC0 協(xié)議
返回搜狐，查看更多責(zé)任編輯：