中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

滑動解鎖方便快捷，是一種目前較為流行的驗證方式，各大平臺都有應用。本文作者介紹了如何用Axure實現滑動圖片解鎖的操作步驟，以及實現過程中的一些心得體會，與大家分享。

演示效果

一、滑動教程

1、首先準備5個元件（看個人喜好，5個矩形也是可以的，起名字也隨意，大小按照下方給的數值來參考，熟練掌握后，大小隨意修改，大小跟公式想對應）

①文本標簽，用于數值獲取，內容填0，起名數值獲取

②矩形，用于主背景，300×35，起名字主背景

③矩形，用于拖動時背景顏色填充，50×35，起名字填充

④矩形，用于拖動按鈕，50×35，起名字拖動

⑤矩形，用于再滑一次按鈕，起名字在滑一次

真正F5查看的時候要把這些元件歸位，如下：

2、把拖動轉換為動態面板，這樣可以觸發拖動時的時間，然后設置水平移動，設置邊界左側>主背景，右側=<=主背景（主背景用作局部變量）

3、同時設置文字數字獲取等于[[Math.floor((LVAR2.x-LVAR1.x)/2.5)]]，意思是獲取拖動時橫坐標減去背景的橫坐標除以2.5取整數值（可以理解為拖動按鈕從起點到終點移動的距離為250x/2.5=100）

4、接下來還是在移動時設置填充背影的尺寸，橫坐標等于他減去自身的寬度加上數值獲取乘以3（為什么要乘以3，因為數值獲取最大數為100，乘以3就是300寬度，咱們的主背景就是300的寬度。好理解吧），設置高度默認35。

以上就可以自由拖動了，而且填充背景也會隨著拖動變長，變短，能伸能縮。。。但是我們要考慮拖拽到頭的時候應該提示驗證成功對吧。

所以接下來我們還要進行完善。

5、我們發現是拉到頭的時候數值獲取應該是100，所以我們要加入一個判斷，if?文字于 數值獲取?< “100”?可以只用拖動，如果等于100了 就不可以拖動了，并且讓再滑一次顯示出來（之前要給再滑一次隱藏了）然后設置填充文字為驗證成功。

6、拉到頭在滑一次就顯出出來了，也顯示驗證成功了，那點擊再滑一次沒反應，所以接下來要給再滑一次設置一些事件，首先加入判斷數值獲取==100的時候，設置填充文字為空，移動拖動按鈕回到起點，設置填充尺寸50×35設置數值獲取=0，隱藏滑動按鈕。

好的以上就完全可以成型了?？梢酝蟿樱梢渣c擊再滑一次恢復到原點。

什么？你要滑動沒到頭的時候松開會自動返回初始位置。。。

好吧，那接下來繼續往下看。

7、松開手的時候也就是拖動結束時，所以在這里設置判斷，如果數值<100,設置拖動按鈕移動到起始位置，并且觸發效果為線性200ms，設置填充為50×35，數值獲取為0

好的，以上就完完全全成型了。大家可以自己多多練習。

二、滑動拼圖解鎖教程

找到一個你喜歡的圖片，如果會PS可以把圖扣成下面的圖這樣。

然后把上面那個制作好的滑動解鎖復制下來，在這個基礎上繼續完善這個滑動拼圖解鎖。

1、要準備的元件有：

①文本標簽，用于數值獲取，內容填0，起名數值獲取

②矩形，用于主背景，300×35，起名字主背景

③矩形，用于拖動時背景顏色填充，50×35，起名字填充

④矩形，用于拖動按鈕，50×35，起名字拖動

⑤矩形，用于再滑一次按鈕，起名字在滑一次

以上是復制下來的，新增的元件有：

⑥主圖，

⑦移動的小圖，起名叫小手吧

⑧一個文本框，用來計時讀秒，起名叫計時

⑨兩個個文本標簽，內容就是厲害了，驗證成功，擊敗老多人了。然后把文本框放這2個文本標簽之間，給這個標簽和上面的文本框組合。起名字叫驗證成功

2、首先我們要知道，拖動按鈕時需要設置小手也一起移動，所以我們要添加事件，當拖動按鈕移動時，設置小手跟隨

然后給小手做個隱藏，當拖動按鈕拖動時，顯示小手，拖動結束時候隱藏。并且判斷數值獲取等100的時候也隱藏小手，并且設置填充背景文字為“要不您帶個眼鏡試試?！保S意寫，哈哈）請看下面

3、接下來我們要判斷小手是不是準確的滑動到缺口那里。

因為我們有數值獲取，嘗試之后發現小手停到缺口的位置是77~80之間，所以我們這樣判斷當拖動結束時，數值獲取>=77and<=80and!=100時，顯示驗證成功組合，顯示再滑一次，顯示小手。

4、接下來，我們來做計時，計時文本框轉換動態面板，并且復制一個，起名計時1，計時2

然后添加判斷，如下

然后我們回到拖動按鈕，設置事件，當拖動時，設置計時動態面板next

這樣就設定好了計時。

5、再滑一次按鈕事件增加了2個

6、拖動按鈕整體事件

教程到這里就完事了，大家可以多多練習，熟練掌握。

• 在線預覽地址：https://g9dh89.axshare.com
• 源文件下載地址：https://pan.baidu.com/s/1Qx1P4QtJOfM0daiT4T1vyg
• 提取碼：smql

最后祝福大家，心想事成，萬事如意。

本文由 @大馬猴 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

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