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

編輯導語：我們在很多軟件登錄方式里面都可以看到掃碼登錄這個選項，那么它是如何實現的呢？本文作者通過掃碼登錄這一案例，詳細講述了Axure高保真原型的核心邏輯，推薦正在做交互設計的童鞋閱讀。

首先來看看我們要實現的效果：

看過效果之后我們再確認一下我們要實現的幾個功能

1. 二維碼有個失效的時間；
2. 當二維碼失效的時候，掃碼不成功會有個錯誤提示；
3. 當二維碼沒有失效的時候，掃碼成功，需要移動端上進行確認登錄；
4. 當掃碼成功后，移動端上確認登錄后，登錄成功；
5. 當掃碼成功后，移動端上取消登錄，二維碼立即失效。

那么，我們提煉一下幾個重點

1. 設置二維碼失效的時間，原型中設置為10秒，可自行調整。
2. 有個掃描中的狀態，當開始掃描的時候，設置一個短小的掃描時間，再進行判斷當前二維碼是否失效；
3. 當二維碼失效了，顯示錯誤提示；
4. 當二維碼沒有失效，顯示掃描成功頁面，進行確認登錄操作；
5. 當操作“確認登錄”，移動端回到掃一掃頁面，桌面端跳轉到首頁；
6. 當操作“取消登錄”，移動端回到掃一掃頁面，桌面端的二維碼立即失效。

一、如何實現上下移動掃描的效果

提前準備一個掃描的圖片，確定好移動的最高點和最低點。想讓它不停的移動就要設置一個觸發點，觸發某個事件就會移動。這里我常用的就是文本輸入框（Text Field），因為它有一個交互叫文本改變時。

當頁面切換到掃描中的頁面時，我們設置一個文本的text，使它的文本進行改變，然后再設置這個文本改變時的交互如下，就可以實現不停的掃描狀態了。

二、如何判斷當前的二維碼狀態

當頁面跳轉到掃描中的狀態，就設置開始掃描，我也是利用了文本改變時的交互。當需要掃描的時候設置文本為“掃描中”，利用文本框內容的判斷，當文本框text是掃描中，去判斷二維碼當前的狀態。二維碼的當前狀態，我也是用了一個文本框來存儲。

這里要注意幾個點，就是很多效果在頁面切換之前要設置回到初始狀態。不然流程走回來的時候沒有在初始狀態，會出現錯誤效果。

三、如何設置二維碼失效時間

失效時間，當倒計時結束時就是二維碼失效之時。所以設置當倒計時的輸入框為“0”的時候，顯示失效蒙層即可。

這其中還有一個加載中的效果——就是在掃描成功的時候，切換到確認登錄頁面的時候，會有一個加載中的效果，來看一下慢動作效果。

想要實現這個效果，首先要做如下準備，畫出4個半圓。

因為加載中這個元素本來就是要隱藏的，只有在需要的時候才顯示。所以就利用整個元素的“顯示時”的交互，首先就是半圓1旋轉180度，然后半圓4旋轉135度，注意每度旋轉時間要一樣。利用半圓2、3遮擋后面的半圓1、2，當1、4到指定位置時，再一起旋轉。

注意在設置旋轉動作的時候，有個更多選項，就是設置旋轉的中心點在什么位置，半圓1當然是右邊的中心點，半圓4是左邊的中心點。

以上就是本原型的核心邏輯啦。

本文由 @Eliza-三十 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議