中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

拖動滑塊時，擺正圖片，你知道是如何實現的嗎？通過學習本篇文章，你可以輕松掌握axure的圖形旋轉驗證碼設計技巧，并在實際工作中加以應用。一起來看一下吧。

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

先來看看效果：

接下來就來分享一下，這個驗證碼是怎么設計出來的。

一、用到的元件

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

二、用到的變量

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

幾個變量的作用分別為：

Angle：驗證碼初始化時，會隨機生成圖形旋轉的角度，此變量用來存儲這個角度的數值，默認值為0。

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

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

三、設計交互

隨機旋轉圖形

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

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

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

Math.random()*360

但這里有個問題，如下圖，如果我們按容差的默認值為5來設置，則可以發現，如果生成的角度在355°（-5°）到5°的時候，這時候的旋轉角度本身就是符合驗證成功的標準的，用戶不用驗證，系統也默認驗證通過，這就有 bug 了，因此，我們生成角度的時候，應該考慮容差的問題，所以生成的角度應該是在5°到355°之間，而不是0°到360°。

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

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

這個時候我們只需要把對應的值代進去就可以了：

x=5=容差=Rot_Rolerance

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

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

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

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

拖動滑塊旋轉圖形

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

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

接下來我主要講講這個旋轉的公式，這個才是這塊的難點。

首先我們需要明確一點，就是滑塊從起始位置拖動結束位置，圖形總共需要旋轉360°，這是因為我們隨機旋轉的圖形，角度是在360°以內，所以用戶拖動滑塊使圖形旋轉一圈之內，一定可以使圖形擺正。

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

首先通過上圖我們可以發現，要計算滑塊總共可以移動多少距離，可以用滑軌的寬度減去滑塊的寬度：

LVAR2.width-LVAR1.width

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

360/(LVAR2.width-LVAR1.width)

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

通過上圖我們可以發現，滑塊在拖動的過程中，滑塊左側與滑軌左側的距離，剛好就是滑塊移動的距離，即：

LVAR1.left-LVAR2.left

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

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

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

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

其實這里有個點，如果沒注意到，就會一直陷在這個公式里面出不去。

我們剛剛設計滑塊拖動時旋轉圖形，是以圖形擺正的狀態下，以0°為原點進行旋轉的，也就是說，滑塊從起始位置拖到結束位置，圖形是從0°轉到360°，所以才會出現上圖所示的，剛拖動圖形就擺正了。

而我們的圖形是經過一定角度旋轉的，我們要的效果是在當前角度的狀態下旋轉一圈，因此，我們需要在剛剛的公式里面加上當前圖形旋轉的角度：

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

這樣，拖動滑塊的時候，圖形就是以當前角度為原點進行旋轉，而不是以0°為原點進行旋轉。

松開滑塊進行驗證

接下來到了最后一個環節，就是當鼠標松開滑塊的時候，驗證當前已經旋轉的角度是否符合條件。

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

Axure 提供了獲取元件旋轉角度的函數【rotation】，只要拿這個函數的結果跟可認為已經擺正的角度的取值范圍（【360-容差】到【0+容差】的區間）進行比較即可，交互設置如下：

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

其他驗證碼教程回顧：

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

【Axure 教程】驗證碼，除了 12306，我還沒有服過誰（數學運算篇）

【Axure 教程】驗證碼，除了 12306，我還沒有服過誰（文字點選篇）

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

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