axure動態面板如何實現滑動解鎖

在製作app互動效果的時候，遇到手機滑動解鎖，所以特意去學了axure怎麼用動態面板實現滑動解鎖（也就是拖動）的效果，這裡和大家做一個分享。

一、第1步：準備相關的元件並命名

手機圖片、手機桌布（這裡為了好看，可忽略）、軌跡矩形、滑塊圖示、提示文字、變化矩形（尺寸隨著滑塊的移動而變化），如下圖：

建議：第一次建議用矩形，不要用圓角，下圖只是為了好看：

二、第2步：調整元件的位置、尺寸、顏色

調整軌跡矩形為半透明狀態，且邊框去掉；調整變化矩形的初始寬度為1；調整提示文字的顏色為灰色，調整後如下圖：

三、第3步：設定互動1. 選中滑塊，將其轉化為動態面板

然後新增【拖動時】的互動用例，新增動作【移動】，選中當前元件，設定【水平拖動】，動畫效果可選【線性】，這樣比較自然，時間可自行設定。

如下圖：

2. 新增邊界

即滑塊從哪裡開始，到哪裡結束；這裡滑塊從軌跡矩形的左側開始，到軌跡矩形的右側結束；在設定邊界前，需點選 fx 新增變數：

新增完區域性變數後，點選插入變數或函式，插入剛剛設定的變數，輸入左側[[LVAR1.left]]，點選確定：

點選確定後，按照同樣的方法新增右側的邊界，輸入[[LVAR1.right]],如下圖：

3. 設定變化矩形的尺寸

點選【設定文字】，選中元件【變化矩形】：

因為它的尺寸是個變數，所以【寬】不能是定值，需要點選右側的fx按鈕新增變數，它的寬=滑塊左側的x座標 – 軌跡矩形左側的x座標 ，變數設定如下圖所示：

點選確定後，設定錨點為左側，動畫選為【線性】，時間設定為與滑塊拖動的時間一致即可；如下圖所示；

這樣設定完動作之後，還需為這些動作新增條件，點選【新增條件】的按鈕，出現彈框如下圖，選擇“符合全部以下條件”，設定【滑塊左側】的【值】大於等於【軌跡左側】的【值】時，滑塊開始拖動：

下圖為設定滑塊的變數：

下圖為設定軌跡矩形的變數：

下圖為新增完變數後，點選確定即可：

點選條件設定的確定後為下圖，然後再點選確定即可：

4. 設定【拖動結束時】

選中【動態面板】即滑塊，新增【拖動結束時】的互動用例，新增動作【設定文字】，元件選擇為【向右滑動解鎖的文字標籤】，設定文字為【富文字】，然後點選【編輯文字】，進入到文字編輯彈框：

以下為文字編輯，輸入文字為“解鎖成功”，然後點選確定即可：

下圖為點選確定後的：

設定完文字後，我們還需要新增一個拖動結束的條件，即當滑塊的右側x座標=軌跡矩形的右側x座標，這裡的變數設定可參照上邊；

以下為設定完的圖：

然後點選確定即可。這裡要注意他們的排序，變化矩形要在軌跡矩形之上：

預覽地址如下：https://2002sx.axshare.com

下載連結如下：

連結：https://pan.baidu.com/s/15-hbzduJBR83lYPo63BuDw

提取碼：5ap2

本文由 @啦啦啦 原創釋出於人人都是產品經理，未經許可，禁止轉載

題圖來自 Pexels，基於 CC0 協議