導(dǎo)言

長按進入編輯狀態(tài)沽损、拖動對象進行排序、移動到特定位置刪除是常見的交互操作方式循头，在手機桌面編輯绵估、第三方視頻編輯等軟件中使用。

本案例將使用Protopie來還原微信朋友圈發(fā)布狀態(tài)時的長按拖動排序的操作卡骂。

本篇教程涉及的protopie功能

○? 觸發(fā)：拖拽国裳、范圍、聯(lián)動全跨、長按缝左、抬起

○? 反應(yīng)：移動、排序浓若、透明度渺杉、大小、賦值

具體實現(xiàn)效果

本案例實現(xiàn)的是微信朋友圈編輯頁面中挪钓，對已選擇的5張圖片進行長按進入到臨時編輯狀態(tài)是越，可以拖動進行圖片排序，或者拖動至頁面底部刪除該張圖片碌上。

動態(tài)交互過程

制作思路

整體流程及細(xì)節(jié)分析

整體操作流程

整體流程如上圖所示分為3大階段英妓，① 用戶長按進入臨時編輯狀態(tài) → ② 保持長按并按住拖動的臨時編輯狀態(tài) → ③ 用戶抬手執(zhí)行具體的編輯操作挽放。其中第②階段中選中項停留熱區(qū)的決定具體排序與刪除操作是否執(zhí)行。

在具體動效細(xì)節(jié)上蔓纠，首先是長按后選中項視效有大小及透明度變化辑畦，底部刪除區(qū)域出現(xiàn)。其次拖動排序過程中腿倚，在拖動時選中的圖片一直跟手移動纯出，同時其余圖片實時調(diào)整順序；拖動到刪除熱區(qū)時敷燎，視效提示刪除有效伴隨提示文字的變化暂筝。最后是抬手后圖片位移至其最終排序位置，大小及透明度也恢復(fù)到未選中時樣式硬贯，刪除區(qū)域收起焕襟。

圖片拖動排序邏輯

整個圖片拖動過程中當(dāng)被拖動的圖片中心點落入設(shè)定的位置交換熱區(qū)則更新圖片排序，見下參考圖所示饭豹。當(dāng)中心點在熱區(qū)1中時鸵赖，保持原始圖片排序；在熱區(qū)2時拄衰，調(diào)整排序為2它褪、1、3翘悉、4茫打、5；在熱區(qū)3時妖混，順序調(diào)整為2老赤、3、1制市、4诗越、5；以此類推息堂。刪除操作的熱區(qū)位于界面底部，可以直接通過被拖動圖片的Y值進行判斷块促。

拖動熱區(qū)圖示

具體實現(xiàn)步驟

Step 1

新建Protopie文件荣堰，實現(xiàn)基本視效。需要注意2點：

○? 考慮長按后的放大效果竭翠，圖片的錨點設(shè)置在圖片的中心位置振坚；

○? 刪除圖層初始在頁面外，同時確認(rèn)刪除的提示圖層透明度設(shè)為0不可見斋扰。

導(dǎo)入素材后界面顯示及圖層關(guān)系

Step 2

添加對圖1的長按觸發(fā)設(shè)置渡八，實現(xiàn)長按后圖層置頂并伴隨大小及透明度的變化啃洋；同時長按有效時刪除區(qū)域有底部向上出現(xiàn)。

Step 3

添加拖拽及范圍觸發(fā)屎鳍，實現(xiàn)拖動圖1調(diào)整配圖順序宏娄。

○? 添加拖拽觸發(fā)，使其在圖1透明度為90即長按生效后支持圖片的拖動移動逮壁，移動不限方向但僅可在屏幕內(nèi)孵坚，比率設(shè)為100，保證拖動過程中圖片一直跟手操作窥淆。

拖拽觸發(fā)設(shè)置

○? 添加橫向范圍卖宠，由于案例為5張圖片2行3列形式，如前文的分析排序過程中共有5處熱區(qū)忧饭。需要設(shè)置3個橫向范圍值時扛伍，并添加圖1 Y值的條件判斷。當(dāng)圖片落入熱區(qū)時將其四張圖片移動到具體位置上词裤。

橫向范圍設(shè)置（以圖1 X≤383舉例）

○? 添加橫向范圍后刺洒，預(yù)覽窗體驗是發(fā)現(xiàn)僅橫向位移反應(yīng)靈敏，單純豎向移動無反應(yīng)亚斋，所以再添加2個的豎向范圍設(shè)定作媚，保證其豎向移動的靈敏。

豎向范圍設(shè)置（以圖1 400≤Y≤869舉例）

Step 4

對圖1添加聯(lián)動觸發(fā)帅刊，將圖1的Y坐標(biāo)與確認(rèn)刪除圖層的透明度關(guān)聯(lián)起來纸泡，使得圖1拖動到頁面底部時確認(rèn)圖層顯示出來，以提示用戶松手后進行刪除操作赖瞒。

聯(lián)動設(shè)置

Step 5

新增兩個變量pic1number女揭、temp。分別代表圖1的當(dāng)前排序栏饮，及一個排序暫存區(qū)吧兔。

變量pic1number的初始值為1，代表圖1原本為第一張圖袍嬉，在范圍設(shè)置中添加賦值設(shè)定境蔼，使得拖動過程中變量值會進行實時變化。1-5代表圖1位于第幾張圖伺通，當(dāng)變量值為0時代表：刪除操作激活有效箍土，松手后會刪除圖1。

由于刪除操作在用戶長按時支持用戶反悔的操作罐监，用戶可以隨時退出刪除激活的狀態(tài)吴藻。所以考慮支持用戶反悔后圖片順序仍舊為激活刪除前的順序，在激活刪除時先將當(dāng)前的圖1位置存儲到變量temp后弓柱，在將變量pic1number設(shè)為0沟堡；當(dāng)用戶退出刪除激活狀態(tài)后侧但，將原本存放的變量temp賦值給到變量pic1number。

監(jiān)聽及變量賦值設(shè)置

Step 6

添加抬起操作航罗，根據(jù)不同的變量pic1number禀横，將圖1移動至其最終的位置，并整體退出可編輯的狀態(tài)伤哺。

整體抬起觸發(fā)設(shè)置

大功告成Ｑ嘞馈！立莉！可以直接在預(yù)覽窗中查看效果~~

本案例以圖1為例說明基本實現(xiàn)方法绢彤，僅支持對圖1的拖動排序或刪除，若要實現(xiàn)界面中所有圖片都支持的排序效果蜓耻，涉及更復(fù)雜的變量設(shè)置及邏輯判斷茫舶，有興趣的同學(xué)可以自己嘗試研究。

案例源文件下載&預(yù)覽

https://cloud.protopie.io/p/2086d0bc6a

本篇教程 作者：Annie