滑動(dòng)解鎖方便快捷，是一種目前較為流行的驗(yàn)證方式，各大平臺(tái)都有應(yīng)用。本文作者介紹了如何用Axure實(shí)現(xiàn)滑動(dòng)圖片解鎖的操作步驟，以及實(shí)現(xiàn)過程中的一些心得體會(huì)，與大家分享。

演示效果

一、滑動(dòng)教程

1、首先準(zhǔn)備5個(gè)元件（看個(gè)人喜好，5個(gè)矩形也是可以的，起名字也隨意，大小按照下方給的數(shù)值來參考，熟練掌握后，大小隨意修改，大小跟公式想對(duì)應(yīng)）

①文本標(biāo)簽，用于數(shù)值獲取，內(nèi)容填0，起名數(shù)值獲取

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

③矩形，用于拖動(dòng)時(shí)背景顏色填充，50×35，起名字填充

④矩形，用于拖動(dòng)按鈕，50×35，起名字拖動(dòng)

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

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

2、把拖動(dòng)轉(zhuǎn)換為動(dòng)態(tài)面板，這樣可以觸發(fā)拖動(dòng)時(shí)的時(shí)間，然后設(shè)置水平移動(dòng)，設(shè)置邊界左側(cè)>主背景，右側(cè)=<=主背景（主背景用作局部變量）

3、同時(shí)設(shè)置文字?jǐn)?shù)字獲取等于[[Math.floor((LVAR2.x-LVAR1.x)/2.5)]]，意思是獲取拖動(dòng)時(shí)橫坐標(biāo)減去背景的橫坐標(biāo)除以2.5取整數(shù)值（可以理解為拖動(dòng)按鈕從起點(diǎn)到終點(diǎn)移動(dòng)的距離為250x/2.5=100）

4、接下來還是在移動(dòng)時(shí)設(shè)置填充背影的尺寸，橫坐標(biāo)等于他減去自身的寬度加上數(shù)值獲取乘以3（為什么要乘以3，因?yàn)閿?shù)值獲取最大數(shù)為100，乘以3就是300寬度，咱們的主背景就是300的寬度。好理解吧），設(shè)置高度默認(rèn)35。

以上就可以自由拖動(dòng)了，而且填充背景也會(huì)隨著拖動(dòng)變長(zhǎng)，變短，能伸能縮。。。但是我們要考慮拖拽到頭的時(shí)候應(yīng)該提示驗(yàn)證成功對(duì)吧。

所以接下來我們還要進(jìn)行完善。

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

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

好的以上就完全可以成型了?？梢酝蟿?dòng)，可以點(diǎn)擊再滑一次恢復(fù)到原點(diǎn)。

什么？你要滑動(dòng)沒到頭的時(shí)候松開會(huì)自動(dòng)返回初始位置。。。

好吧，那接下來繼續(xù)往下看。

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

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

二、滑動(dòng)拼圖解鎖教程

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

然后把上面那個(gè)制作好的滑動(dòng)解鎖復(fù)制下來，在這個(gè)基礎(chǔ)上繼續(xù)完善這個(gè)滑動(dòng)拼圖解鎖。

1、要準(zhǔn)備的元件有：

①文本標(biāo)簽，用于數(shù)值獲取，內(nèi)容填0，起名數(shù)值獲取

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

③矩形，用于拖動(dòng)時(shí)背景顏色填充，50×35，起名字填充

④矩形，用于拖動(dòng)按鈕，50×35，起名字拖動(dòng)

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

以上是復(fù)制下來的，新增的元件有：

⑥主圖，

⑦移動(dòng)的小圖，起名叫小手吧

⑧一個(gè)文本框，用來計(jì)時(shí)讀秒，起名叫計(jì)時(shí)

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

2、首先我們要知道，拖動(dòng)按鈕時(shí)需要設(shè)置小手也一起移動(dòng)，所以我們要添加事件，當(dāng)拖動(dòng)按鈕移動(dòng)時(shí)，設(shè)置小手跟隨

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

3、接下來我們要判斷小手是不是準(zhǔn)確的滑動(dòng)到缺口那里。

因?yàn)槲覀冇袛?shù)值獲取，嘗試之后發(fā)現(xiàn)小手停到缺口的位置是77~80之間，所以我們這樣判斷當(dāng)拖動(dòng)結(jié)束時(shí)，數(shù)值獲取>=77and<=80and!=100時(shí)，顯示驗(yàn)證成功組合，顯示再滑一次，顯示小手。

4、接下來，我們來做計(jì)時(shí)，計(jì)時(shí)文本框轉(zhuǎn)換動(dòng)態(tài)面板，并且復(fù)制一個(gè)，起名計(jì)時(shí)1，計(jì)時(shí)2

然后添加判斷，如下

然后我們回到拖動(dòng)按鈕，設(shè)置事件，當(dāng)拖動(dòng)時(shí)，設(shè)置計(jì)時(shí)動(dòng)態(tài)面板next

這樣就設(shè)定好了計(jì)時(shí)。

5、再滑一次按鈕事件增加了2個(gè)

6、拖動(dòng)按鈕整體事件

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

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

最后祝福大家，心想事成，萬(wàn)事如意。

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

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