中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

社交APP中流行左滑右滑的效果來查看他人簡短的頁面資料，若二者感興趣，會出現匹配。那么我們該如何通過Axure實現交友APP滑動匹配效果？本文對此進行了探討分析，一起來看看吧。

前言

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

一、演示

老規矩，先上演示：

二、說明

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

• 前中后三張圖片的大小、位置、層級調整。
• 滑動圖片時應該怎樣旋轉。
• 圖片旋轉角度解決滿足條件時怎么處理。
• 圖片旋轉角度不足怎么歸位怎么回正。

其它的動態效果請自行增加。

三、準備工作

需要先準備以下元件：

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

一個用來刷新的矩形（起名：刷新），同樣隱藏。

一個中繼器，數據有兩列，一列叫[[Item.image]]插入圖片，一列叫[[Item.isShow]]代表是否顯示，設置為分頁顯示，每頁項數量為3。

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

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

中繼器的數據圖片請自備，最好先按教程來，我的演示圖片寬高為300px * 400px，[[Item.isShow]]列都寫true。

四、教程

開始寫交互了，先從“匹配”矩形開始，這個簡單，“單擊時”隱藏自身：

“刷新”矩形的交互是“單擊時”刷新頁面，這里是因為我在做第一版時發現了一個中繼器篩選會導致拖放交互失效的BUG，已提交給Axure官方確認了，所在刷新頁面是目前兼容性最好的方法。

中繼器的交互有點多，但是也不難理解，主要是設置圖片大小、位置、層級。我已經都標清楚了，請看下圖：

這里有三點需要注意：

1. 設置圖片尺寸時，錨點要選“頂部”這樣后面的移動可以無需計算。
2. 移動“人物”動態面板是為了把所有的圖片都放在一起。
3. 把“人物”置底是為了按中繼器的順序排好層次。

關鍵的“滑動”動態面板的交互來啦！

依次詳細解釋一下：

拖動時：

• 讓圖片跟隨鼠標移動
• 向右移TotalDragX為正時要逆時針轉，向左移TotalDragX為負時要順時針轉，所以用了[[-TotalDragX]]，順時針轉負的角度就是逆時間嘛。除以5是鼠標每移5個像素，讓圖片才旋轉1度。

旋轉時：

如果右滑逆時針超過7度（順時針低于-7度）：

• 顯示“匹配”矩形，前面已經設置過“點擊時”隱藏了。
• 圖片向右下方移動100像素，并逐漸隱藏。
• 更新當前行[[Item.isShow]]為False，不再顯示。

如果左滑順時針超過7度：

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

拖放結束時（沒有觸發“旋轉時”說明拖動幅度不夠大，需要歸位，角度回正）

如果當前順時針轉了：

• 回到原來位置
• 逆時針回到0度

如果當前逆時針轉了：

• 回到原來位置
• 順時針回到360度

告訴大家一個小技巧：

中繼器如果篩選到一個都不顯示了，那么中繼器的“每項加載時”就根本不會觸發。那怎樣知道中繼器已經篩選空了呢？這時外面那個（組合）就起作用了，也要添加交互的：

這時把“刷新”矩形顯示出來就好了呀。

這樣一個交友APP滑動匹配效果就制作完成了，可自行在放大圖片、成功匹配等環節加入更多絢麗的動效。