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

動效見下圖所示：

一、元素介紹

為了方便識別，我將元素分類，左側(cè)列表與右側(cè)場景中內(nèi)容相對應(yīng)。左側(cè)元素列表中D元素，對應(yīng)右側(cè)場景中沒有標(biāo)注的部分，都屬于D元素。

二、觸發(fā)介紹

本例中用到了以下觸發(fā)功能：

• 快擲
• 移動
• 聯(lián)動

三、制作方法

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

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

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

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

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

選擇“移動”選項是為了設(shè)置，當(dāng)用戶快速向左滑動時，指定元素移動的位置區(qū)域。

并且在元素屬性面板將坐標(biāo)值設(shè)置為：X軸-176.78 / Y軸132.29；詳細(xì)設(shè)置如圖所示：

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

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

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

設(shè)置的區(qū)別在于X軸的坐標(biāo)，如下圖所示：

完成了滑動效果的設(shè)置，下一步我們需要對滑動后“標(biāo)記未讀”和“刪除”2個按鈕進(jìn)行設(shè)置動效。

這里我們使用“聯(lián)動”功能來完成：

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

首先我們創(chuàng)建“聯(lián)動”設(shè)置：在觸發(fā)動作面板，點擊“添加觸發(fā)”，然后選擇“聯(lián)動”。

下一步，我們設(shè)置聯(lián)動效果的移動方向。

這里我們選擇X軸：

設(shè)置完成后，我們點擊“標(biāo)記未讀”按鈕進(jìn)行設(shè)置聯(lián)動后的移動效果。

選擇“標(biāo)記未讀”按鈕后，點擊聯(lián)動面板下方的“+”按鈕，選擇“移動”參數(shù)，對聯(lián)動的元素進(jìn)行設(shè)置，如圖：

在這里我們看到右下角設(shè)置參數(shù)為：

• 參數(shù)A：0 / 375 / 132.29
• 參數(shù)B：-176 / 200 / 132.29

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

第一組參數(shù)：0 / 375 / 132.29；這個比較好理解，標(biāo)注了“標(biāo)記未讀”默認(rèn)在面板中的位置。

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

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

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

各位可以按照相同的方法對“刪除”按鈕進(jìn)行設(shè)置。

最終設(shè)置后的參數(shù)如下圖所示：

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

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

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

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