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

本案例將通過ProtoPie來還原微信朋友圈發(fā)布狀態(tài)時(shí)的長按拖動(dòng)排序的操作。

具體實(shí)現(xiàn)動(dòng)態(tài)效果

↑動(dòng)態(tài)交互過程

案例源文件下載&預(yù)覽：https://cloud.protopie.io/p/2086d0bc6a

本篇教程涉及的protopie功能

• 觸發(fā)：拖拽、范圍、聯(lián)動(dòng)、監(jiān)聽、長按、抬起
• 反應(yīng)：移動(dòng)、排序、透明度、大小、賦值

制作思路

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

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

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

2. 圖片拖動(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)：

• 考慮長按后的放大效果，圖片的錨點(diǎn)設(shè)置在圖片的中心位置；
• 刪除圖層初始在頁面外，同時(shí)確認(rèn)刪除的提示圖層透明度設(shè)為0不可見。

Step 2

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

Step 3

添加拖拽及范圍觸發(fā)，實(shí)現(xiàn)拖動(dòng)圖1調(diào)整配圖順序。

——添加拖拽觸發(fā)，使其在圖1透明度為90即長按生效后支持圖片的拖動(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)到具體位置上。

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

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

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

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。

由于刪除操作在用戶長按時(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é)可以自己嘗試研究。

作者：Annie

本文由 @Annie 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議