一般來說，現在的移動端開發都會引入身份證和銀行卡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毫秒‘；點選確認即可。

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

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