国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

編輯導語：當我們給手機進行解鎖時，往往需要進行滑動，那么這個功能的設計過程是怎樣的呢？本文作者通過實際的操作經驗，為我們總結了axure動態(tài)面板如何才能實現滑動解鎖。

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

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

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

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

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

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

三、第3步：設置交互

1. 選中滑塊，將其轉化為動態(tài)面板

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

如下圖：

2. 添加邊界

即滑塊從哪里開始，到哪里結束；這里滑塊從軌跡矩形的左側開始，到軌跡矩形的右側結束；在設置邊界前，需點擊 fx 添加變量：

添加完局部變量后，點擊插入變量或函數，插入剛剛設置的變量，輸入左側[[LVAR1.left]]，點擊確定：

點擊確定后，按照同樣的方法添加右側的邊界，輸入[[LVAR1.right]],如下圖：

3. 設置變化矩形的尺寸

點擊【設置文本】，選中元件【變化矩形】：

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

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

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

下圖為設置滑塊的變量：

下圖為設置軌跡矩形的變量：

下圖為添加完變量后，點擊確定即可：

點擊條件設置的確定后為下圖，然后再點擊確定即可：

4. 設置【拖動結束時】

選中【動態(tài)面板】即滑塊，添加【拖動結束時】的交互用例，添加動作【設置文本】，元件選擇為【向右滑動解鎖的文本標簽】，設置文本為【富文本】，然后點擊【編輯文本】，進入到文本編輯彈框：

以下為文本編輯，輸入文本為“解鎖成功”，然后點擊確定即可：

下圖為點擊確定后的：

設置完文本后，我們還需要添加一個拖動結束的條件，即當滑塊的右側x坐標=軌跡矩形的右側x坐標，這里的變量設置可參照上邊；

以下為設置完的圖：

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

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

下載鏈接如下：

鏈接：https://pan.baidu.com/s/15-hbzduJBR83lYPo63BuDw

提取碼：5ap2

本文由 @啦啦啦 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議