Axure教程：旋轉(zhuǎn)驗(yàn)證原型

Axure教程：旋轉(zhuǎn)驗(yàn)證原型旋轉(zhuǎn)驗(yàn)證是一種主流的驗(yàn)證方式，所以今天作者就教大家如果在Axure制作一個(gè)高保真的旋轉(zhuǎn)驗(yàn)證原型。原型預(yù)覽地址：一、制作材料總共分成3大部分，如下圖所示依次為：驗(yàn)證彈窗、驗(yàn)證按鈕和成功提示彈窗。1.驗(yàn)證彈窗驗(yàn)證彈窗主要包括以下元件：背景框：使用矩形制作，陰影默認(rèn)選擇有；圖片：圓形的圖片，默認(rèn)不是正向擺放的；關(guān)閉按鈕：x的按鈕；滑動(dòng)條：包括滑動(dòng)按鈕、滑動(dòng)條、提示文字?；瑒?dòng)按鈕需要轉(zhuǎn)為動(dòng)態(tài)面板的形式，因?yàn)橹挥袆?dòng)態(tài)面板可以拖動(dòng)，需要自適應(yīng)內(nèi)容，默認(rèn)選擇一個(gè)動(dòng)態(tài)面板背景色。2.驗(yàn)證按鈕普通按鈕制作而成。3.成功提示彈窗這里我們用矩形制作，制作完成之后轉(zhuǎn)為動(dòng)態(tài)面板，固定在屏幕中部，默認(rèn)隱藏。二、制作思路鼠標(biāo)拖動(dòng)滑動(dòng)按鈕時(shí)，圖片根據(jù)滑動(dòng)的距離旋轉(zhuǎn)對(duì)應(yīng)的角度。鼠標(biāo)松開時(shí)（即拖動(dòng)結(jié)束時(shí)），判斷圖片是否為正，如果是正的，驗(yàn)證成功；否則則為驗(yàn)證失敗，需要重新驗(yàn)證。三、制作教程1.滑動(dòng)按鈕拖動(dòng)時(shí)移動(dòng)：拖動(dòng)活動(dòng)按鈕時(shí)，滑動(dòng)按鈕跟隨鼠標(biāo)水平移動(dòng)，移動(dòng)的界限左側(cè)為0，右側(cè)為下面灰色條的寬度；旋轉(zhuǎn)：拖動(dòng)活動(dòng)按鈕時(shí)，旋轉(zhuǎn)圖片，旋轉(zhuǎn)的角度為[[LVAR1.x*360/(LVAR2.width-LVAR1.width)+180]]，LVAR1是滑動(dòng)按鈕，LVAR2是整個(gè)滑動(dòng)條。2.滑動(dòng)按鈕拖動(dòng)結(jié)束時(shí)我們事先需要計(jì)算圖擺正需要旋轉(zhuǎn)多少度，例如原來(lái)的圖是-180度，那么它要旋轉(zhuǎn)的距離應(yīng)該就是一般的距離，直接有需要旋轉(zhuǎn)到正的角度/360，然后乘整個(gè)滑塊的寬度。最后前后需要給一個(gè)誤差，如果不給誤差，那就很難達(dá)到那個(gè)點(diǎn)；如果誤差給得太大，那么就很容易驗(yàn)證成功，經(jīng)過(guò)多次測(cè)試最好是正負(fù)5。拖動(dòng)結(jié)束時(shí)需要分兩種情況。情況1：驗(yàn)證成功即滑動(dòng)距離在擺正距離的區(qū)間內(nèi)，本案例的擺正區(qū)間為158-168，然后我們做一下交互：設(shè)置文本——在區(qū)間內(nèi)將拖動(dòng)至圖片擺正的文本設(shè)置為驗(yàn)證成功；等待0.5秒；顯示成功提示彈窗；觸發(fā)關(guān)閉按鈕鼠標(biāo)單擊時(shí)的事件——這里后面后詳細(xì)講，其實(shí)就是將驗(yàn)證彈窗里的元件復(fù)原并且隱藏。情況2：驗(yàn)證失敗即滑動(dòng)距離不在在擺正距離的區(qū)間內(nèi)，然后我們做一下交互：設(shè)置文本：這里我們需要新建一個(gè)空白文本記錄滑動(dòng)按鈕在拖動(dòng)結(jié)束時(shí)的位置，后面需要這個(gè)值來(lái)計(jì)算旋轉(zhuǎn)的角度（圖片旋轉(zhuǎn)回初始狀態(tài)的角度），LVAR1.x就是滑動(dòng)按鈕所在的橫坐標(biāo)；旋轉(zhuǎn)：將圖片復(fù)位，所以需要逆時(shí)針旋轉(zhuǎn)[[LVAR1*360/(LVAR2.width-LVAR3.width)]]，LVAR1就是上面記錄的滑動(dòng)按鈕的x坐標(biāo)，LVAR2.width是整個(gè)滑塊的寬，LVAR3.width是滑動(dòng)按鈕的寬；移動(dòng)：將滑動(dòng)按鈕移動(dòng)回0.0的初始位置。3.關(guān)閉按鈕鼠標(biāo)單擊時(shí)事件其實(shí)關(guān)閉按鈕就是復(fù)原和隱藏驗(yàn)證彈窗，總共有以下四步：隱藏驗(yàn)證彈窗；移動(dòng)滑動(dòng)按鈕到達(dá)（0.0）；旋轉(zhuǎn)圖片到達(dá)180度，因?yàn)榘咐跏际?80度，所以就是到達(dá)180度，如果你們是其他度數(shù)就填對(duì)應(yīng)的初始度數(shù)即可；設(shè)置文本，因?yàn)橹膀?yàn)證成功的時(shí)候把驗(yàn)證文字更改成驗(yàn)證成功，所以復(fù)原的時(shí)候，需要把文本設(shè)置為原來(lái)的文本，即拖動(dòng)至圖片擺正。4.驗(yàn)證按鈕其實(shí)驗(yàn)證按鈕就是一個(gè)啟動(dòng)驗(yàn)證的開關(guān)，只需要顯示驗(yàn)證彈窗即可，你們可以根據(jù)你們?cè)蛯?shí)際的觸發(fā)條件，顯示驗(yàn)證彈窗。5.成功提示彈窗在驗(yàn)證成功后，會(huì)顯示成功提示彈窗。但是該彈窗不能一直顯示，而且