axure8實現登錄界面包含加載登錄動畫,用戶密碼輸入值的判斷

axure8實現登錄界面包含加載登錄動畫,用戶密碼輸入值的判斷

本文轉自:http://blog.csdn.net/ffacffac/article/details/78361508

       本例子通過axure來實現簡單的登錄界面,包含類似加載動畫,判斷用戶名密碼是否爲空的功能。

實現效果如下:



一、  實現登錄動畫

首先畫出如圖所示的登錄界面圖,兩個輸入框,一個登錄按鈕,各個控件的命名如下,Ctrl+鼠標左鍵選中所有控件,點擊鼠標右鍵,選“組合”將這些控件組合起來,如下圖所示:





準備一張加載動畫,比如這樣的圖片,根據背景色自己選擇加載圖片,命名爲“登錄加載動畫圖片”將圖片拖到登錄按鈕右邊,如下圖所示:


選中加載圖片,鼠標右鍵—>“設爲隱藏”。

接下來要給登錄按鈕設置一些事件,雙擊窗口右邊“鼠標單擊時”—>在彈出的用例窗口中進行如下圖操作:



讓加載圖片顯示出來

接下來設置加載圖片動畫:


接下來你可以預覽一下,加載動畫就做好了。

二、  實現用戶名密碼是否正確

添加一個警告文本,右鍵單擊-->“設爲隱藏”



選中登錄按鈕,雙擊剛纔添加的用例,在彈出的用例框中選擇“添加條件”,添加輸入框判斷條件




以上的條件表示只有用戶名,密碼輸入框的值不爲空才能通過。

接下來,再添加一個條件,只要判斷到用戶名,密碼輸入框有一個是空的,則顯示警告語。步驟爲:選中登錄按鈕-->再次雙擊“鼠標單擊時”再添加一個新的用例,在彈出的窗口中選中“添加條件”



點擊確定後,單擊“顯示/隱藏”-->選中“用戶密碼不能爲空”元件將其顯示出來。


到最後登錄界面的加載動畫和判空就做好了,用戶名、密碼判斷那裏你可以指定成自己的值進行判斷,可以根據判斷到正確的值,跳轉的不同的界面。


下載地址:http://download.csdn.net/download/ffacffac/10044320



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章