是否經(jīng)常被開(kāi)發(fā)說(shuō)原型設(shè)計(jì)的不夠精細(xì)、又或者經(jīng)常聽(tīng)到有人說(shuō)自己的產(chǎn)品交互不好呢？本文將通過(guò)一個(gè)簡(jiǎn)單左滑刪除交互，讓你了解與好的交互體驗(yàn)的一步差距。

預(yù)覽地址：https://85dtn5.axshare.com

一、簡(jiǎn)單實(shí)現(xiàn)左滑刪除

先制作一個(gè)375*72的矩形A；

在矩形A的右側(cè)，再制作3個(gè)85*72的矩形1、矩形2矩形3，分別設(shè)置為藍(lán)色、橙色、紅色（如圖）；

將這4個(gè)矩形居中對(duì)齊后，全選然后按【Ctrl+G】進(jìn)行組合；

選中組合后，鼠標(biāo)右擊，選中右鍵菜單列表的最后一個(gè)選項(xiàng)【轉(zhuǎn)換為動(dòng)態(tài)面板】，使該組合變成一個(gè)動(dòng)態(tài)面板；

選中動(dòng)態(tài)面板，設(shè)置大小為375*72；這樣我們就可以把矩形1、矩形2、矩形3隱藏在我們的視野中了（如圖）；

準(zhǔn)備工作已經(jīng)完成了，那么接下來(lái)進(jìn)行交互制作。

二、簡(jiǎn)單左滑的交互制作

我們要模擬的是手指滑動(dòng)的滑動(dòng)的效果，根據(jù)這點(diǎn)，我們選擇動(dòng)態(tài)面板，并在交互中選擇【拖動(dòng)時(shí)】的交互；

• 拖動(dòng)時(shí)，我們需要向左移動(dòng)組合，那么我們只需要設(shè)置組合跟隨水平移動(dòng)的方向即可；這樣我們便實(shí)現(xiàn)了拖動(dòng)時(shí)，移動(dòng)組合的效果。
• 你會(huì)發(fā)現(xiàn)經(jīng)常把組合移除了可見(jiàn)視野內(nèi)（附上一個(gè)GIF）。我們需要給組合的移動(dòng)范圍進(jìn)行限制，左側(cè)小于等于0，右側(cè)大于等于這樣我們就能把水平的移動(dòng)范圍限制在可視的范圍內(nèi)。

這樣我們就算是完成了左滑刪除的效果。

但你在拖動(dòng)體驗(yàn)幾次看下，這個(gè)和我們平時(shí)使用iOS手機(jī)時(shí)所感受到的左滑效果一樣嗎？

三、“一步之差”

細(xì)心的朋友，你是否發(fā)現(xiàn)了端倪呢？沒(méi)錯(cuò)，我們可以看到在左滑時(shí)，三個(gè)左滑菜單項(xiàng)的色塊是同步出現(xiàn)的，整塊的效果是抽屜式的，一層疊著一層出現(xiàn)。

看明白了這個(gè)細(xì)節(jié)，那我們繼續(xù)升級(jí)效果。

四、左滑刪除的進(jìn)階

要實(shí)現(xiàn)抽屜式的效果，那必然就要將之前的排列樣式以及交互進(jìn)行調(diào)整：

選中組合1，按【Ctrl+Shift+G】取消組合，選中矩形A和矩形1（藍(lán)色）進(jìn)行組合，并命名為組合2；選中動(dòng)態(tài)面板，將拖動(dòng)效果的目標(biāo)改為組合2，將右側(cè)邊界改為205（如圖）；這樣我們就先得到了一個(gè)拖動(dòng)后，可以移動(dòng)組合2的動(dòng)態(tài)面板，接下來(lái)就是要移動(dòng)矩形2（橙色）和矩形3（紅色）。

選中藍(lán)色矩形，添加移動(dòng)時(shí)的交互效果，移動(dòng)矩形2（橙色）和矩形3（紅色），通過(guò)上方的gif圖，我們可以了解到矩形1、矩形2、矩形3的移動(dòng)速度比為 3:2:1 ，所以整體的函數(shù)設(shè)置如下：

移動(dòng)矩形2時(shí)，x的函數(shù)為 [[375-(375-This.x)/3*2]] ，y的函數(shù)為 [[This.y]] ；

移動(dòng)矩形3時(shí)，x的函數(shù)為 [[375-(375-This.x)/3]] ，y的函數(shù)為[[This.y]] ；

到此，iOS左滑刪除的交互效果就算是大功告成了。

第一次編輯，如果有描述不清楚的地方，歡迎各位大佬點(diǎn)評(píng)。如果有想了解文中的函數(shù)和邊界如何設(shè)置，又或者想要其他的交互效果，也可以在文章下方留言。