驗證碼,除了 12306,我還沒(méi)有服過(guò)誰(shuí)(圖形旋轉篇)

1 評論 4538 瀏覽 9 收藏 11 分鐘

拖動(dòng)滑塊時(shí),擺正圖片,你知道是如何實(shí)現的嗎?通過(guò)學(xué)習本篇文章,你可以輕松掌握axure的圖形旋轉驗證碼設計技巧,并在實(shí)際工作中加以應用。一起來(lái)看一下吧。

今天要分享的是圖形旋轉驗證碼設計教程。

先來(lái)看看效果:

【Axure 教程】驗證碼,除了 12306,我還沒(méi)有服過(guò)誰(shuí)(圖形旋轉篇)

接下來(lái)就來(lái)分享一下,這個(gè)驗證碼是怎么設計出來(lái)的。

一、用到的元件

下圖是整個(gè)設計需要用到的元件以及它們對應的命名,注意:【驗證通過(guò)】的提示組合元件在設計完成之后,需要放在【驗證圖形】的正上方,并設為【隱藏】。

【Axure 教程】驗證碼,除了 12306,我還沒(méi)有服過(guò)誰(shuí)(圖形旋轉篇)

二、用到的變量

以下是本設計需要用到的變量:

【Axure 教程】驗證碼,除了 12306,我還沒(méi)有服過(guò)誰(shuí)(圖形旋轉篇)

幾個(gè)變量的作用分別為:

Angle:驗證碼初始化時(shí),會(huì )隨機生成圖形旋轉的角度,此變量用來(lái)存儲這個(gè)角度的數值,默認值為0。

Rot_Rolerance:此變量用來(lái)設置用戶(hù)擺正圖形時(shí)允許出現的容差,如果不設置一定的容差,用戶(hù)驗證時(shí)要準確擺正圖形難度就太高了,容差的作用允許用戶(hù)擺正圖形時(shí)出現一定偏差也可認為驗證成功,默認值為5。

Rot_Ver_Result:驗證結果,不設默認值,驗證成功之后,將此變量設置為 True,在校驗時(shí),只需要判斷此變量的值即可知道用戶(hù)是否驗證通過(guò)。

三、設計交互

隨機旋轉圖形

首先是驗證碼初始化的時(shí)候,驗證圖形會(huì )隨機旋轉一定的角度,因此這里給【驗證圖形】添加【載入時(shí)】【旋轉】的交互。

由于角度是隨機的,所以我們需要生成一個(gè)隨機角度并復制給變量【Angle】,并在設置圖形旋轉時(shí),旋轉的角度設為變量【Angle】。

【Axure 教程】驗證碼,除了 12306,我還沒(méi)有服過(guò)誰(shuí)(圖形旋轉篇)

很多人應該都知道,在 Axure 的表達式中,【Math.random()】可以用來(lái)生成0-1的隨機數,所以,如果我們要生成一個(gè)隨機的角度,可以選擇生成0-360的一個(gè)隨機數即可,公式如下:

Math.random()*360

但這里有個(gè)問(wèn)題,如下圖,如果我們按容差的默認值為5來(lái)設置,則可以發(fā)現,如果生成的角度在355°(-5°)到5°的時(shí)候,這時(shí)候的旋轉角度本身就是符合驗證成功的標準的,用戶(hù)不用驗證,系統也默認驗證通過(guò),這就有 bug 了,因此,我們生成角度的時(shí)候,應該考慮容差的問(wèn)題,所以生成的角度應該是在5°到355°之間,而不是0°到360°。

【Axure 教程】驗證碼,除了 12306,我還沒(méi)有服過(guò)誰(shuí)(圖形旋轉篇)

這個(gè)時(shí)候新的問(wèn)題來(lái)了,怎么生成5°到355°的隨機數呢,經(jīng)過(guò)在開(kāi)發(fā)論壇的“臥底”,終于得出了結論,如果要生成從 x 到 y 的隨機數,對應的公式是這樣的:

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

這個(gè)時(shí)候我們只需要把對應的值代進(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)理,沒(méi)想到最后竟然也寫(xiě)起了代碼,通過(guò)以上這一波操作,我們就實(shí)現了【驗證圖形】在載入時(shí)生成合格的隨機旋轉角度功能。

拖動(dòng)滑塊旋轉圖形

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

【Axure 教程】驗證碼,除了 12306,我還沒(méi)有服過(guò)誰(shuí)(滑塊拖動(dòng)篇)

接下來(lái)我主要講講這個(gè)旋轉的公式,這個(gè)才是這塊的難點(diǎn)。

首先我們需要明確一點(diǎn),就是滑塊從起始位置拖動(dòng)結束位置,圖形總共需要旋轉360°,這是因為我們隨機旋轉的圖形,角度是在360°以?xún)?,所以用?hù)拖動(dòng)滑塊使圖形旋轉一圈之內,一定可以使圖形擺正。

我們設置局部變量【LVAR1】指代【滑塊】,【LVAR2】指代【滑軌】。

【Axure 教程】驗證碼,除了 12306,我還沒(méi)有服過(guò)誰(shuí)(圖形旋轉篇)

首先通過(guò)上圖我們可以發(fā)現,要計算滑塊總共可以移動(dòng)多少距離,可以用滑軌的寬度減去滑塊的寬度:

LVAR2.width-LVAR1.width

因此,知道了距離,知道了旋轉的角度,如果我們要計算一個(gè)距離單位內,圖形對應旋轉的角度,只需要將總的角度除以距離:

360/(LVAR2.width-LVAR1.width)

知道了一個(gè)距離單位旋轉的角度,接下來(lái)我們只要知道滑塊移動(dòng)的距離,用距離乘以距離單位旋轉的角度就可以了。這個(gè)距離的獲取也不難。

【Axure 教程】驗證碼,除了 12306,我還沒(méi)有服過(guò)誰(shuí)(圖形旋轉篇)

通過(guò)上圖我們可以發(fā)現,滑塊在拖動(dòng)的過(guò)程中,滑塊左側與滑軌左側的距離,剛好就是滑塊移動(dòng)的距離,即:

LVAR1.left-LVAR2.left

到這里,我們就可以推導出完整的公式了:

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

到目前為止一切好像都很順利,我們來(lái)預覽一下:

【Axure 教程】驗證碼,除了 12306,我還沒(méi)有服過(guò)誰(shuí)(圖形旋轉篇)

預覽結果卻跟想象的不一樣,滑塊才剛開(kāi)始拖動(dòng),圖形馬上就擺正了。

其實(shí)這里有個(gè)點(diǎn),如果沒(méi)注意到,就會(huì )一直陷在這個(gè)公式里面出不去。

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

而我們的圖形是經(jīng)過(guò)一定角度旋轉的,我們要的效果是在當前角度的狀態(tài)下旋轉一圈,因此,我們需要在剛剛的公式里面加上當前圖形旋轉的角度:

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

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

松開(kāi)滑塊進(jìn)行驗證

接下來(lái)到了最后一個(gè)環(huán)節,就是當鼠標松開(kāi)滑塊的時(shí)候,驗證當前已經(jīng)旋轉的角度是否符合條件。

滑塊【拖動(dòng)結束時(shí)】,判斷是否驗證成功,驗證成功就顯示【驗證通過(guò)】的提示,并將變量【Rot_Ver_Result】設置為【True】,否則將滑塊移動(dòng)【回拖動(dòng)前位置】,并將圖形按變量值【Angle】旋轉回之前的角度。

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

如此,整個(gè)教程的分享到這里就結束了。

其他驗證碼教程回顧:

【Axure 教程】驗證碼,除了 12306,我還沒(méi)有服過(guò)誰(shuí)(圖形驗證篇)

【Axure 教程】驗證碼,除了 12306,我還沒(méi)有服過(guò)誰(shuí)(數學(xué)運算篇)

【Axure 教程】驗證碼,除了 12306,我還沒(méi)有服過(guò)誰(shuí)(文字點(diǎn)選篇)

【Axure 教程】驗證碼,除了 12306,我還沒(méi)有服過(guò)誰(shuí)(滑動(dòng)拼圖篇)

【Axure 教程】驗證碼,除了 12306,我還沒(méi)有服過(guò)誰(shuí)(滑塊拖動(dòng)篇)

專(zhuān)欄作家

產(chǎn)品錦李,公眾號:產(chǎn)品錦李(ID:IMPM996),人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。不務(wù)正業(yè)的產(chǎn)品經(jīng)理和他的產(chǎn)品設計。

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

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

該文觀(guān)點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 親這個(gè)原型可以分享嗎

    來(lái)自山東 回復