Protopie教程：微信列表如何左滑刪除－宋豐月的推薦購物清單

作為一個產品經理，對交互頗有興趣，還記得最初做動畫是使用Flash，現在慢慢的嘗試了新的軟件：Axure、Justinmind、Protopie；最后移動端更喜歡使用Protopie，所以和大家分享一些細微效果的教程。

動效見下圖所示：

一、元素介紹

為了方便識別，我將元素分類，左側列表與右側場景中內容相對應。左側元素列表中D元素，對應右側場景中沒有標注的部分，都屬于D元素。

本例中用到了以下觸發功能：

本案例我們需要對JD這個元素進行制作左滑效果，并且在左滑的過程中，標記未讀和刪除2個按鈕跟隨出現。

我們先在左側元素列表，點擊選擇JD元素，在右側觸發窗口中點擊“添加觸發”按鈕，選擇“快擲”。

選擇“快擲”是為了模擬出手指在列表中快速滑過的效果。

完成選擇后，我們在“快擲”的屬性面板，選擇滑動的方向：

設置完成，下一步，我們在動作面板中點擊“+”按鈕，選擇“移動”選項。

選擇“移動”選項是為了設置，當用戶快速向左滑動時，指定元素移動的位置區域。

并且在元素屬性面板將坐標值設置為：X軸-176.78 / Y軸132.29；詳細設置如圖所示：

這里有幾個選項需要介紹一下：動畫特效；這里可以設置滑動時的特效，選項很多如下圖所示，我們這里選擇“緩入緩出”&“Cubic”。

有興趣的可以自己嘗試切換下效果：

完成以上步驟，我們完成了對元素左滑動效的設置，各位可以按照相同的方法對元素進行右滑設置。

設置的區別在于X軸的坐標，如下圖所示：

完成了滑動效果的設置，下一步我們需要對滑動后“標記未讀”和“刪除”2個按鈕進行設置動效。

這里我們使用“聯動”功能來完成：

這里大家可能會發現上圖與文章開始的圖片，2個按鈕排列方式不同，因為文章開頭的圖片，是為了讓大家更好的分辨元素，因為2個按鈕在滑動時是在同一水平位置移動的，所以我們把按鈕重疊擺放了。

首先我們創建“聯動”設置：在觸發動作面板，點擊“添加觸發”，然后選擇“聯動”。

下一步，我們設置聯動效果的移動方向。

這里我們選擇X軸：

設置完成后，我們點擊“標記未讀”按鈕進行設置聯動后的移動效果。

選擇“標記未讀”按鈕后，點擊聯動面板下方的“+”按鈕，選擇“移動”參數，對聯動的元素進行設置，如圖：

在這里我們看到右下角設置參數為：

這里和大家解釋一下這些參數的意思：

第一組參數：0 / 375 / 132.29；這個比較好理解，標注了“標記未讀”默認在面板中的位置。

第二組參數：-176 / 200 / 132.29；這組參數表示的意思如下：

-176：表示“標記未讀”按鈕，基于“JD”這個元素，向左移動的位置來確定的，在本例中“JD”元素向左滑動時，向左移動了176個像素，所以我們設置了-176這個值。
200：表示“標記未讀”按鈕移動后X軸最終停止的位置，200表示距離屏幕邊距左側200。
132.29：表示“標記未讀”按鈕移動后Y軸最終停止的位置。

完成以上步驟，我們完成了對“JD”元素左滑時，“標記未讀”按鈕跟著滑動的效果設置。

各位可以按照相同的方法對“刪除”按鈕進行設置。

最終設置后的參數如下圖所示：