拖動滑塊時，擺正圖片，你知道是如何實(shí)現(xiàn)的嗎？通過學(xué)習(xí)本篇文章，你可以輕松掌握axure的圖形旋轉(zhuǎn)驗(yàn)證碼設(shè)計(jì)技巧，并在實(shí)際工作中加以應(yīng)用。一起來看一下吧。

今天要分享的是圖形旋轉(zhuǎn)驗(yàn)證碼設(shè)計(jì)教程。

先來看看效果：

接下來就來分享一下，這個驗(yàn)證碼是怎么設(shè)計(jì)出來的。

一、用到的元件

下圖是整個設(shè)計(jì)需要用到的元件以及它們對應(yīng)的命名，注意：【驗(yàn)證通過】的提示組合元件在設(shè)計(jì)完成之后，需要放在【驗(yàn)證圖形】的正上方，并設(shè)為【隱藏】。

二、用到的變量

以下是本設(shè)計(jì)需要用到的變量：

幾個變量的作用分別為：

Angle：驗(yàn)證碼初始化時，會隨機(jī)生成圖形旋轉(zhuǎn)的角度，此變量用來存儲這個角度的數(shù)值，默認(rèn)值為0。

Rot_Rolerance：此變量用來設(shè)置用戶擺正圖形時允許出現(xiàn)的容差，如果不設(shè)置一定的容差，用戶驗(yàn)證時要準(zhǔn)確擺正圖形難度就太高了，容差的作用允許用戶擺正圖形時出現(xiàn)一定偏差也可認(rèn)為驗(yàn)證成功，默認(rèn)值為5。

Rot_Ver_Result：驗(yàn)證結(jié)果，不設(shè)默認(rèn)值，驗(yàn)證成功之后，將此變量設(shè)置為 True，在校驗(yàn)時，只需要判斷此變量的值即可知道用戶是否驗(yàn)證通過。

三、設(shè)計(jì)交互

隨機(jī)旋轉(zhuǎn)圖形

首先是驗(yàn)證碼初始化的時候，驗(yàn)證圖形會隨機(jī)旋轉(zhuǎn)一定的角度，因此這里給【驗(yàn)證圖形】添加【載入時】【旋轉(zhuǎn)】的交互。

由于角度是隨機(jī)的，所以我們需要生成一個隨機(jī)角度并復(fù)制給變量【Angle】，并在設(shè)置圖形旋轉(zhuǎn)時，旋轉(zhuǎn)的角度設(shè)為變量【Angle】。

很多人應(yīng)該都知道，在 Axure 的表達(dá)式中，【Math.random()】可以用來生成0-1的隨機(jī)數(shù)，所以，如果我們要生成一個隨機(jī)的角度，可以選擇生成0-360的一個隨機(jī)數(shù)即可，公式如下：

Math.random()*360

但這里有個問題，如下圖，如果我們按容差的默認(rèn)值為5來設(shè)置，則可以發(fā)現(xiàn)，如果生成的角度在355°（-5°）到5°的時候，這時候的旋轉(zhuǎn)角度本身就是符合驗(yàn)證成功的標(biāo)準(zhǔn)的，用戶不用驗(yàn)證，系統(tǒng)也默認(rèn)驗(yàn)證通過，這就有 bug 了，因此，我們生成角度的時候，應(yīng)該考慮容差的問題，所以生成的角度應(yīng)該是在5°到355°之間，而不是0°到360°。

這個時候新的問題來了，怎么生成5°到355°的隨機(jī)數(shù)呢，經(jīng)過在開發(fā)論壇的“臥底”，終于得出了結(jié)論，如果要生成從 x 到 y 的隨機(jī)數(shù)，對應(yīng)的公式是這樣的：

Math.random()*(y-x)+x

這個時候我們只需要把對應(yīng)的值代進(jìn)去就可以了：

x=5=容差=Rot_Rolerance

y=355=360-容差=360-Rot_Rolerance

因此，最后的公式就變成了：

Math.random()*(360-Rot_Rolerance-Rot_Rolerance)+Rot_Rolerance

作為一名產(chǎn)品經(jīng)理，沒想到最后竟然也寫起了代碼，通過以上這一波操作，我們就實(shí)現(xiàn)了【驗(yàn)證圖形】在載入時生成合格的隨機(jī)旋轉(zhuǎn)角度功能。

拖動滑塊旋轉(zhuǎn)圖形

下圖是滑塊【拖動時】的交互，交互中加了個判斷，防止在驗(yàn)證成功后還可以滑塊還可以被拖動，在拖動滑塊時，讓【滑塊】跟隨拖動，以【滑軌】左右兩端為邊界進(jìn)行水平運(yùn)動，這塊比較簡單，如果還不太懂的，可以參考：

【Axure 教程】驗(yàn)證碼，除了 12306，我還沒有服過誰（滑塊拖動篇）

接下來我主要講講這個旋轉(zhuǎn)的公式，這個才是這塊的難點(diǎn)。

首先我們需要明確一點(diǎn)，就是滑塊從起始位置拖動結(jié)束位置，圖形總共需要旋轉(zhuǎn)360°，這是因?yàn)槲覀冸S機(jī)旋轉(zhuǎn)的圖形，角度是在360°以內(nèi)，所以用戶拖動滑塊使圖形旋轉(zhuǎn)一圈之內(nèi)，一定可以使圖形擺正。

我們設(shè)置局部變量【LVAR1】指代【滑塊】，【LVAR2】指代【滑軌】。

首先通過上圖我們可以發(fā)現(xiàn)，要計(jì)算滑塊總共可以移動多少距離，可以用滑軌的寬度減去滑塊的寬度：

LVAR2.width-LVAR1.width

因此，知道了距離，知道了旋轉(zhuǎn)的角度，如果我們要計(jì)算一個距離單位內(nèi)，圖形對應(yīng)旋轉(zhuǎn)的角度，只需要將總的角度除以距離：

360/(LVAR2.width-LVAR1.width)

知道了一個距離單位旋轉(zhuǎn)的角度，接下來我們只要知道滑塊移動的距離，用距離乘以距離單位旋轉(zhuǎn)的角度就可以了。這個距離的獲取也不難。

通過上圖我們可以發(fā)現(xiàn)，滑塊在拖動的過程中，滑塊左側(cè)與滑軌左側(cè)的距離，剛好就是滑塊移動的距離，即：

LVAR1.left-LVAR2.left

到這里，我們就可以推導(dǎo)出完整的公式了：

(LVAR1.left-LVAR2.left)*360/(LVAR2.width-LVAR1.width)

到目前為止一切好像都很順利，我們來預(yù)覽一下：

預(yù)覽結(jié)果卻跟想象的不一樣，滑塊才剛開始拖動，圖形馬上就擺正了。

其實(shí)這里有個點(diǎn)，如果沒注意到，就會一直陷在這個公式里面出不去。

我們剛剛設(shè)計(jì)滑塊拖動時旋轉(zhuǎn)圖形，是以圖形擺正的狀態(tài)下，以0°為原點(diǎn)進(jìn)行旋轉(zhuǎn)的，也就是說，滑塊從起始位置拖到結(jié)束位置，圖形是從0°轉(zhuǎn)到360°，所以才會出現(xiàn)上圖所示的，剛拖動圖形就擺正了。

而我們的圖形是經(jīng)過一定角度旋轉(zhuǎn)的，我們要的效果是在當(dāng)前角度的狀態(tài)下旋轉(zhuǎn)一圈，因此，我們需要在剛剛的公式里面加上當(dāng)前圖形旋轉(zhuǎn)的角度：

(LVAR1.left-LVAR2.left)*360/(LVAR2.width-LVAR1.width)+Angle

這樣，拖動滑塊的時候，圖形就是以當(dāng)前角度為原點(diǎn)進(jìn)行旋轉(zhuǎn)，而不是以0°為原點(diǎn)進(jìn)行旋轉(zhuǎn)。

松開滑塊進(jìn)行驗(yàn)證

接下來到了最后一個環(huán)節(jié)，就是當(dāng)鼠標(biāo)松開滑塊的時候，驗(yàn)證當(dāng)前已經(jīng)旋轉(zhuǎn)的角度是否符合條件。

滑塊【拖動結(jié)束時】，判斷是否驗(yàn)證成功，驗(yàn)證成功就顯示【驗(yàn)證通過】的提示，并將變量【Rot_Ver_Result】設(shè)置為【True】，否則將滑塊移動【回拖動前位置】，并將圖形按變量值【Angle】旋轉(zhuǎn)回之前的角度。

Axure 提供了獲取元件旋轉(zhuǎn)角度的函數(shù)【rotation】，只要拿這個函數(shù)的結(jié)果跟可認(rèn)為已經(jīng)擺正的角度的取值范圍（【360-容差】到【0+容差】的區(qū)間）進(jìn)行比較即可，交互設(shè)置如下：

如此，整個教程的分享到這里就結(jié)束了。

其他驗(yàn)證碼教程回顧：

【Axure 教程】驗(yàn)證碼，除了 12306，我還沒有服過誰（圖形驗(yàn)證篇）

【Axure 教程】驗(yàn)證碼，除了 12306，我還沒有服過誰（數(shù)學(xué)運(yùn)算篇）

【Axure 教程】驗(yàn)證碼，除了 12306，我還沒有服過誰（文字點(diǎn)選篇）

【Axure 教程】驗(yàn)證碼，除了 12306，我還沒有服過誰（滑動拼圖篇）

【Axure 教程】驗(yàn)證碼，除了 12306，我還沒有服過誰（滑塊拖動篇）