作為一個産品經理，對交互頗有興趣，還記得最初做動畫是使用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中查看到實際的效果，也完成了我的第一篇分享，希望大家喜歡，歡迎交流。

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

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

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部