1. 程式人生 > >Axure學習筆記整理3-掃描棒自動輪播效果

Axure學習筆記整理3-掃描棒自動輪播效果

一般來說,現在的移動端開發都會引入身份證和銀行卡OCR掃描,這個也是在註冊和填寫個人資訊的時候非常必要的流程。簡單的原型設計只需要點選進入掃描頁即可。但我對這個掃描互動還是比較感興趣,所以做了一個比較簡單的掃描自動輪播的互動:

掃描棒自動輪播效果:

第一步:準備一個引導頁或掃一掃圖示按鈕,隨便選擇一個(例如以下頁面);這個是用來點選後進入掃描頁面的。

第二步,拖拽一個300*376的矩形,設定不透明度為20%,去掉描邊。再拖拽一個150*150的白色矩形,設定不透明度為70%,去掉描邊。把白色矩形放在大矩形的較上方位置。

第三步,給裡面的白色矩形放好掃描框邊角:一般用一條垂直線和一條水平線製成,放在矩形四周;然後在下面加一個文字‘將身份證正面置於此區域,並對齊掃描框邊緣’;

第四步,比較關鍵:

1)拖拽一個矩形,設定長度為125,高度為4,然後吸取描框邊角的顏色:一般為綠色;選定這個矩形點選滑鼠右鍵‘轉化為動態面板’;

2)將這個動態面板命名為‘掃描棒’,並拉長動態面板到掃描框位置;

3)雙擊右邊‘概要頁面’的掃描棒會彈出設定‘面板狀態管理’,點選加號新增stage2;

注:看下面標註的1、2、3、4步驟;1拉長,2命名,3雙擊,4新增狀態;

第五步,雙擊stage1進去會看到有一個掃描棒,ctrl+c複製掃描棒然後雙擊stage2進去ctrl+v貼上;

要保證stage1和stage2都有掃描棒;

第六步,設定互動,我這裡是選擇身份證掃描頁進入互動的;

選定‘點選上傳身份證‘圖示,選擇用例’滑鼠單擊時‘--點選’設定面板狀態‘--選擇’掃描棒‘--選擇狀態’next‘--選擇’向後迴圈‘、’迴圈間隔2000毫秒‘、’向下滑動2000毫秒‘;點選確認即可。

這樣就可以直接預覽動態效果了:進入預覽頁面點選一下‘點選上傳身份證’圖示,右邊就會自動輪播掃描。

以上,如有興趣的可自己調節顏色及增加更高保真度設計。