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

編輯導(dǎo)語(yǔ)：在驗(yàn)證方式中，旋轉(zhuǎn)驗(yàn)證是常見(jiàn)方式之一。本篇文章里，作者對(duì)旋轉(zhuǎn)驗(yàn)證設(shè)計(jì)中的制作材料、思路和具體過(guò)程做了詳細(xì)展示，讓我們來(lái)看一下。

旋轉(zhuǎn)驗(yàn)證是一種主流的驗(yàn)證方式，所以今天作者就教大家如果在Axure制作一個(gè)高保真的旋轉(zhuǎn)驗(yàn)證原型。

原型預(yù)覽地址：https://lu56id.axshare.com

一、制作材料

總共分成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)松開(kāi)時(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，然后我們做一下交互：

1. 設(shè)置文本——在區(qū)間內(nèi)將拖動(dòng)至圖片擺正的文本設(shè)置為驗(yàn)證成功；
2. 等待0.5秒；
3. 顯示成功提示彈窗；
4. 觸發(fā)關(guān)閉按鈕鼠標(biāo)單擊時(shí)的事件——這里后面后詳細(xì)講，其實(shí)就是將驗(yàn)證彈窗里的元件復(fù)原并且隱藏。

情況2：驗(yàn)證失敗

即滑動(dòng)距離不在在擺正距離的區(qū)間內(nèi)，然后我們做一下交互：

1. 設(shè)置文本：這里我們需要新建一個(gè)空白文本記錄滑動(dòng)按鈕在拖動(dòng)結(jié)束時(shí)的位置，后面需要這個(gè)值來(lái)計(jì)算旋轉(zhuǎn)的角度（圖片旋轉(zhuǎn)回初始狀態(tài)的角度），LVAR1.x就是滑動(dòng)按鈕所在的橫坐標(biāo)；
2. 旋轉(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)按鈕的寬；
3. 移動(dòng)：將滑動(dòng)按鈕移動(dòng)回0.0的初始位置。

3. 關(guān)閉按鈕鼠標(biāo)單擊時(shí)事件

其實(shí)關(guān)閉按鈕就是復(fù)原和隱藏驗(yàn)證彈窗，總共有以下四步：

1. 隱藏驗(yàn)證彈窗；
2. 移動(dòng)滑動(dòng)按鈕到達(dá)（0.0）；
3. 旋轉(zhuǎn)圖片到達(dá)180度，因?yàn)榘咐跏际?80度，所以就是到達(dá)180度，如果你們是其他度數(shù)就填對(duì)應(yīng)的初始度數(shù)即可；
4. 設(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)證的開(kāi)關(guān)，只需要顯示驗(yàn)證彈窗即可，你們可以根據(jù)你們?cè)蛯?shí)際的觸發(fā)條件，顯示驗(yàn)證彈窗。

5. 成功提示彈窗

在驗(yàn)證成功后，會(huì)顯示成功提示彈窗。但是該彈窗不能一直顯示，而且這個(gè)提醒沒(méi)必要手動(dòng)點(diǎn)擊關(guān)閉那么麻煩，就是一條簡(jiǎn)單的輕提示，所以我們等待3秒然后設(shè)置自動(dòng)隱藏即可。

以上就是本期旋轉(zhuǎn)驗(yàn)證原型的全部?jī)?nèi)容了，你學(xué)會(huì)了嗎？

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

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