品牌行銷策略，產品行銷與設計，各類型行銷推廣案例分享-品牌行銷點點讚
作為一個產品經理，對交互頗有興趣，還記得最初做動畫是使用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協議。