axure8實現登錄界面包含加載登錄動畫,用戶密碼輸入值的判斷
本文轉自:http://blog.csdn.net/ffacffac/article/details/78361508
本例子通過axure來實現簡單的登錄界面,包含類似加載動畫,判斷用戶名密碼是否爲空的功能。
實現效果如下:
一、 實現登錄動畫
首先畫出如圖所示的登錄界面圖,兩個輸入框,一個登錄按鈕,各個控件的命名如下,Ctrl+鼠標左鍵選中所有控件,點擊鼠標右鍵,選“組合”將這些控件組合起來,如下圖所示:
準備一張加載動畫,比如這樣的圖片,根據背景色自己選擇加載圖片,命名爲“登錄加載動畫圖片”將圖片拖到登錄按鈕右邊,如下圖所示:
選中加載圖片,鼠標右鍵—>“設爲隱藏”。
接下來要給登錄按鈕設置一些事件,雙擊窗口右邊“鼠標單擊時”—>在彈出的用例窗口中進行如下圖操作:
讓加載圖片顯示出來
接下來設置加載圖片動畫:
接下來你可以預覽一下,加載動畫就做好了。
二、 實現用戶名密碼是否正確
添加一個警告文本,右鍵單擊-->“設爲隱藏”
選中登錄按鈕,雙擊剛纔添加的用例,在彈出的用例框中選擇“添加條件”,添加輸入框判斷條件
以上的條件表示只有用戶名,密碼輸入框的值不爲空才能通過。
接下來,再添加一個條件,只要判斷到用戶名,密碼輸入框有一個是空的,則顯示警告語。步驟爲:選中登錄按鈕-->再次雙擊“鼠標單擊時”再添加一個新的用例,在彈出的窗口中選中“添加條件”
點擊確定後,單擊“顯示/隱藏”-->選中“用戶密碼不能爲空”元件將其顯示出來。
到最後登錄界面的加載動畫和判空就做好了,用戶名、密碼判斷那裏你可以指定成自己的值進行判斷,可以根據判斷到正確的值,跳轉的不同的界面。
下載地址:http://download.csdn.net/download/ffacffac/10044320