Protopie教程:微信列表如何左滑刪除

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

動效見下圖所示:

一、元素介紹

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

二、觸發介紹

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

三、制作方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這里我們選擇X軸:

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

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

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

  • 參數A:0 / 375 / 132.29
  • 參數B:-176 / 200 / 132.29

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

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

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

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

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

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

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

至此,我們可以在player中查看到實際的效果,也完成了我的第一篇分享,希望大家喜歡,歡迎交流。

源文件下載地址:https://pan.baidu.com/s/1zpVeHD9AUIrr96hRBbrpFQ

 

本文由 @ioioi 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于CC0協議。

給作者打賞,鼓勵TA抓緊創作!

5人打賞



文章若有侵權請來信告知:品牌行銷策略,產品行銷與設計,各類型行銷推廣案例分享-品牌行銷點點讚 » Protopie教程:微信列表如何左滑刪除