導(dǎo)言
長(zhǎng)按進(jìn)入編輯狀態(tài)、拖動(dòng)對(duì)象進(jìn)行排序、移動(dòng)到特定位置刪除是常見的交互操作方式，在手機(jī)桌面編輯、第三方視頻編輯等軟件中使用。
本案例將使用Protopie來還原微信朋友圈發(fā)布狀態(tài)時(shí)的長(zhǎng)按拖動(dòng)排序的操作。
本篇教程涉及的protopie功能
○? 觸發(fā)：拖拽、范圍、聯(lián)動(dòng)、長(zhǎng)按、抬起
○? 反應(yīng)：移動(dòng)、排序、透明度、大小、賦值
具體實(shí)現(xiàn)效果
本案例實(shí)現(xiàn)的是微信朋友圈編輯頁面中，對(duì)已選擇的5張圖片進(jìn)行長(zhǎng)按進(jìn)入到臨時(shí)編輯狀態(tài)，可以拖動(dòng)進(jìn)行圖片排序，或者拖動(dòng)至頁面底部刪除該張圖片。
制作思路
整體流程及細(xì)節(jié)分析
整體流程如上圖所示分為3大階段，① 用戶長(zhǎng)按進(jìn)入臨時(shí)編輯狀態(tài) → ② 保持長(zhǎng)按并按住拖動(dòng)的臨時(shí)編輯狀態(tài) → ③ 用戶抬手執(zhí)行具體的編輯操作。其中第②階段中選中項(xiàng)停留熱區(qū)的決定具體排序與刪除操作是否執(zhí)行。
在具體動(dòng)效細(xì)節(jié)上，首先是長(zhǎng)按后選中項(xiàng)視效有大小及透明度變化，底部刪除區(qū)域出現(xiàn)。其次拖動(dòng)排序過程中，在拖動(dòng)時(shí)選中的圖片一直跟手移動(dòng)，同時(shí)其余圖片實(shí)時(shí)調(diào)整順序；拖動(dòng)到刪除熱區(qū)時(shí)，視效提示刪除有效伴隨提示文字的變化。最后是抬手后圖片位移至其最終排序位置，大小及透明度也恢復(fù)到未選中時(shí)樣式，刪除區(qū)域收起。
圖片拖動(dòng)排序邏輯
整個(gè)圖片拖動(dòng)過程中當(dāng)被拖動(dòng)的圖片中心點(diǎn)落入設(shè)定的位置交換熱區(qū)則更新圖片排序，見下參考圖所示。當(dāng)中心點(diǎn)在熱區(qū)1中時(shí)，保持原始圖片排序；在熱區(qū)2時(shí)，調(diào)整排序?yàn)?、1、3、4、5；在熱區(qū)3時(shí)，順序調(diào)整為2、3、1、4、5；以此類推。刪除操作的熱區(qū)位于界面底部，可以直接通過被拖動(dòng)圖片的Y值進(jìn)行判斷。
具體實(shí)現(xiàn)步驟
Step 1
新建Protopie文件，實(shí)現(xiàn)基本視效。需要注意2點(diǎn)：
○? 考慮長(zhǎng)按后的放大效果，圖片的錨點(diǎn)設(shè)置在圖片的中心位置；
○? 刪除圖層初始在頁面外，同時(shí)確認(rèn)刪除的提示圖層透明度設(shè)為0不可見。
Step 2
添加對(duì)圖1的長(zhǎng)按觸發(fā)設(shè)置，實(shí)現(xiàn)長(zhǎng)按后圖層置頂并伴隨大小及透明度的變化；同時(shí)長(zhǎng)按有效時(shí)刪除區(qū)域有底部向上出現(xiàn)。
Step 3
添加拖拽及范圍觸發(fā)，實(shí)現(xiàn)拖動(dòng)圖1調(diào)整配圖順序。
○? 添加拖拽觸發(fā)，使其在圖1透明度為90即長(zhǎng)按生效后支持圖片的拖動(dòng)移動(dòng)，移動(dòng)不限方向但僅可在屏幕內(nèi)，比率設(shè)為100，保證拖動(dòng)過程中圖片一直跟手操作。
○? 添加橫向范圍，由于案例為5張圖片2行3列形式，如前文的分析排序過程中共有5處熱區(qū)。需要設(shè)置3個(gè)橫向范圍值時(shí)，并添加圖1 Y值的條件判斷。當(dāng)圖片落入熱區(qū)時(shí)將其四張圖片移動(dòng)到具體位置上。
○? 添加橫向范圍后，預(yù)覽窗體驗(yàn)是發(fā)現(xiàn)僅橫向位移反應(yīng)靈敏，單純豎向移動(dòng)無反應(yīng)，所以再添加2個(gè)的豎向范圍設(shè)定，保證其豎向移動(dòng)的靈敏。
Step 4
對(duì)圖1添加聯(lián)動(dòng)觸發(fā)，將圖1的Y坐標(biāo)與確認(rèn)刪除圖層的透明度關(guān)聯(lián)起來，使得圖1拖動(dòng)到頁面底部時(shí)確認(rèn)圖層顯示出來，以提示用戶松手后進(jìn)行刪除操作。
Step 5
新增兩個(gè)變量pic1number、temp。分別代表圖1的當(dāng)前排序，及一個(gè)排序暫存區(qū)。
變量pic1number的初始值為1，代表圖1原本為第一張圖，在范圍設(shè)置中添加賦值設(shè)定，使得拖動(dòng)過程中變量值會(huì)進(jìn)行實(shí)時(shí)變化。1-5代表圖1位于第幾張圖，當(dāng)變量值為0時(shí)代表：刪除操作激活有效，松手后會(huì)刪除圖1。
由于刪除操作在用戶長(zhǎng)按時(shí)支持用戶反悔的操作，用戶可以隨時(shí)退出刪除激活的狀態(tài)。所以考慮支持用戶反悔后圖片順序仍舊為激活刪除前的順序，在激活刪除時(shí)先將當(dāng)前的圖1位置存儲(chǔ)到變量temp后，在將變量pic1number設(shè)為0；當(dāng)用戶退出刪除激活狀態(tài)后，將原本存放的變量temp賦值給到變量pic1number。
Step 6
添加抬起操作，根據(jù)不同的變量pic1number，將圖1移動(dòng)至其最終的位置，并整體退出可編輯的狀態(tài)。
大功告成！??！可以直接在預(yù)覽窗中查看效果~~
本案例以圖1為例說明基本實(shí)現(xiàn)方法，僅支持對(duì)圖1的拖動(dòng)排序或刪除，若要實(shí)現(xiàn)界面中所有圖片都支持的排序效果，涉及更復(fù)雜的變量設(shè)置及邏輯判斷，有興趣的同學(xué)可以自己嘗試研究。
案例源文件下載&預(yù)覽
https://cloud.protopie.io/p/2086d0bc6a
本篇教程 作者：Annie
