拼拼圖進(jìn)行身份驗(yàn)證已經(jīng)越來越常見，這種驗(yàn)證方式趣味性十足，還能增強(qiáng)網(wǎng)絡(luò)安全性，那今天我們來看看這個(gè)功能的原型是怎么做出來的。

注：在做的過程中看到前輩做過類似的滑動(dòng)拼圖解鎖，但是我用的相關(guān)函數(shù)更簡(jiǎn)單易懂易操作，有興趣大家可以都看看，自己選擇適合的。

效果圖送給大家

實(shí)現(xiàn)原理

移動(dòng)拼圖的按鈕只能在杠桿中運(yùn)動(dòng)，移動(dòng)按鈕移動(dòng)時(shí)，拼圖跟著移動(dòng)，拼圖移動(dòng)到對(duì)應(yīng)位置的可允許誤差范圍內(nèi)松開鼠標(biāo)時(shí)，拼圖驗(yàn)證成功，否則返回失敗結(jié)果，按鈕和拼圖返回初始位

教程如下

1、設(shè)置好基本元件

2、設(shè)置拼圖按鈕只能在杠桿中運(yùn)動(dòng)

3、設(shè)置拼圖面板在指定區(qū)域并跟隨按鈕面板移動(dòng)

4、設(shè)置一個(gè)圖像熱區(qū)做為拼圖的可允許誤差范圍，當(dāng)按鈕面板結(jié)束拖動(dòng)時(shí)，如果紅心面板沒有接觸到允許誤差范圍，則紅心面板和按鈕面板返回初始位置，矩形返回文字：驗(yàn)證失敗，請(qǐng)重新驗(yàn)證。

5、當(dāng)按鈕面板結(jié)束拖動(dòng)時(shí)，如果紅心面板接觸到允許誤差范圍時(shí)，紅心面板移到白心位置，矩形返回文字：驗(yàn)證成功。

6、哈哈，終于設(shè)置好了，快預(yù)覽看看效果，成就感滿滿是不是~~

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

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