導(dǎo)讀：我們?cè)谑褂觅~號(hào)登錄一些系統(tǒng)或其他產(chǎn)品時(shí)，經(jīng)常會(huì)遇到安全驗(yàn)證，常見的大多是文字驗(yàn)證、滑動(dòng)拼圖驗(yàn)證、數(shù)字驗(yàn)證等。本篇文章將向大家詳細(xì)介紹一下如何繪制常見的滑動(dòng)拼圖驗(yàn)證，希望可以幫助到大家。

原型示例：https://1grbma.axshare.com

一、繪制準(zhǔn)備

首先，如下圖所示，我們首先要準(zhǔn)備滑動(dòng)拼圖驗(yàn)證所需要的一些所需元件：

①：底部驗(yàn)證圖片一張

②：底部驗(yàn)證圖片部分拼塊

③：拖動(dòng)按鈕

④：“驗(yàn)證失敗”矩形文本

⑤：“驗(yàn)證成功”圖片+文本

二、交互設(shè)置

1、選擇“小拼圖”點(diǎn)擊右鍵轉(zhuǎn)換成動(dòng)態(tài)面板；選擇“拖動(dòng)按鈕”點(diǎn)擊右鍵轉(zhuǎn)換成動(dòng)態(tài)面板。

2、如果想要拖動(dòng)按鈕，設(shè)置按鈕和拼圖兩個(gè)動(dòng)態(tài)面板隨著拖動(dòng)而橫向移動(dòng)，那么移動(dòng)就必須要在一定的區(qū)域范圍內(nèi)。

如何計(jì)算區(qū)域范圍呢：區(qū)域范圍的開始位置是按鈕默認(rèn)位置，也就是按鈕左邊的x坐標(biāo)值，區(qū)域范圍的結(jié)尾位置是按鈕右邊和大圖右邊的x坐標(biāo)一樣的位置。

咱們示例的原型中，按鈕左邊的x坐標(biāo)值為30，小拼圖左邊x左邊為30。（可根據(jù)實(shí)際需要設(shè)置參數(shù)）

底部大圖左邊的坐標(biāo)值x為20，圖片長(zhǎng)度為374。（可根據(jù)實(shí)際需要設(shè)置參數(shù)）

由此咱們可以得出區(qū)域范圍的開始邊界為30，結(jié)尾邊界為394。

接著選中拖動(dòng)按鈕，設(shè)置交互為【拖動(dòng)時(shí)】-【移動(dòng)】-【當(dāng)前元件】-【跟隨水平拖動(dòng)】

左側(cè)邊界設(shè)置為大于30，右側(cè)邊界設(shè)置為小于394。

再次添加新動(dòng)作【移動(dòng)】-【拼圖元件】-【跟隨水平拖動(dòng)】

描述：拼圖的邊界范圍和按鈕的有一些小差別，因?yàn)檫@兩個(gè)動(dòng)態(tài)面板大小不一樣，他們排列方式是z左側(cè)對(duì)齊，也就是小拼圖和按鈕的起始位置一致，按鈕右側(cè)要比小拼圖多一些，所以結(jié)束坐標(biāo)需要-10左右，此處參數(shù)可根據(jù)需要進(jìn)行設(shè)置；

左側(cè)邊界設(shè)置為大于30，右側(cè)邊界設(shè)置為小于384。

接著當(dāng)按鈕拖動(dòng)結(jié)束時(shí)，需要判斷拼圖的坐標(biāo)是不是和陰影部分的坐標(biāo)重合；

我們可以拖一條輔助線與陰影坐標(biāo)重合，可以看到陰影坐標(biāo)x是236，也就是說(shuō)當(dāng)拼圖移動(dòng)到坐標(biāo)x=236時(shí)，拼圖正確。

在畫圖我們?cè)试S有一些小的誤差，也就是說(shuō)允許在陰影前后幾個(gè)坐標(biāo)內(nèi)也是可以判斷成功的，在這里我將用陰影前后10個(gè)坐標(biāo)的誤差來(lái)設(shè)置，那么也就是拼圖的坐標(biāo)在226~246之間，就認(rèn)為拼圖是正確的，否則，拼圖失敗。

接著我們?cè)俅芜x中拖動(dòng)按鈕，對(duì)其進(jìn)行交互【拖動(dòng)結(jié)束時(shí)】-【設(shè)置情形1 this.x的值在226~246之間】-【顯示驗(yàn)證成功】如下圖所示

接著我們對(duì)其添加情形2，對(duì)其進(jìn)行交互【拖動(dòng)結(jié)束時(shí)】-【設(shè)置情形this.x的值小于226或者大于246】-【顯示驗(yàn)證失敗】如下圖所示

接著交互設(shè)置：

【拖動(dòng)結(jié)束時(shí)】-【等待1500ms】-【打開登錄頁(yè)】

【驗(yàn)證失敗時(shí)】-【等待1000ms】-【重新載入頁(yè)面】

【拖動(dòng)時(shí)】-【隱藏驗(yàn)證失敗】

到這里，我們所有的步驟也就設(shè)置完畢了，若有描述不夠詳細(xì)的地方，可以在下方評(píng)論，本人看到后第一時(shí)間回復(fù)你們，希望本篇教程可以幫助到你們。

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

題圖來(lái)自Pexels，基于CC0協(xié)議。