使用AxureRP8中的一些基本功能，我們實(shí)現(xiàn)一個(gè)動(dòng)態(tài)切換的登錄注冊(cè)面板。
效果圖：
有沒(méi)有感覺(jué)很滑、很爽的樣子？
接下來(lái)，例行公事。
先做分析，再實(shí)現(xiàn)步驟。
問(wèn)：用戶做了什么？
答：用戶點(diǎn)擊了兩個(gè)標(biāo)簽。
問(wèn)：給用戶什么反饋？
兩個(gè)頂部的標(biāo)簽被【鼠標(biāo)單擊時(shí)】要完成以下動(dòng)作：
- 被點(diǎn)擊的標(biāo)簽需要放大尺寸，而另外一個(gè)標(biāo)簽需要縮小尺寸。
- 與上一個(gè)動(dòng)作同時(shí)，登錄注冊(cè)面板要對(duì)應(yīng)的切換內(nèi)容。
好了，分析完畢，接下來(lái)我們看實(shí)現(xiàn)過(guò)程。
一、準(zhǔn)備元件
兩個(gè)標(biāo)簽用無(wú)邊框矩形，分別命名為“LoginTag”和“RegisterTag”，然后，設(shè)置不同的填充顏色，并且設(shè)置圓角后，在樣式中取消3個(gè)不需要的圓角。
下方的面板，我們使用動(dòng)態(tài)面板，命名為“Panel”，雙擊打開(kāi)動(dòng)態(tài)面板管理，修改“State1”的命名為“Login”；然后，點(diǎn)添加按鈕，新增一個(gè)狀態(tài)，并命名為“Register”；最后，在動(dòng)態(tài)面板的兩個(gè)狀態(tài)中，分別放入登錄面板的元件和注冊(cè)面板的元件。
提示：這一步操作也可以先做好登錄面板，全選登錄面板的元件，點(diǎn)擊鼠標(biāo)右鍵，選擇【轉(zhuǎn)換為動(dòng)態(tài)面板】，然后雙擊動(dòng)態(tài)面板，點(diǎn)中第一個(gè)狀態(tài)后，點(diǎn)重復(fù)按鈕，在新添加的狀態(tài)中將登錄面板內(nèi)容改為注冊(cè)面板內(nèi)容。
二、添加交互
1、為每個(gè)元件添加【鼠標(biāo)單擊時(shí)】的交互，動(dòng)作為【設(shè)置尺寸】于“當(dāng)前元件”為放大后的尺寸，設(shè)置另外一個(gè)元件為縮小后的尺寸，動(dòng)畫選擇【線性】時(shí)長(zhǎng)為“500”毫秒。不過(guò)要注意，元件“LoginTag”的錨點(diǎn)是【左上角】或【左側(cè)】，元件“RegisterTag”的錨點(diǎn)是【右上角】或【右側(cè)】。
2、繼續(xù)在用例中添加動(dòng)作【設(shè)置面版狀態(tài)】于“Panel”為對(duì)應(yīng)的狀態(tài)，并設(shè)置【進(jìn)入動(dòng)畫】和【退出動(dòng)畫】，時(shí)長(zhǎng)均為“500”毫秒。
注意：兩個(gè)動(dòng)畫方向保持一致，并且選擇狀態(tài)為“Login”時(shí)，動(dòng)畫是【向右滑動(dòng)】，選擇狀態(tài)為【Register】時(shí)，動(dòng)畫是【向左滑動(dòng)】。
到這里，我們就完成了這個(gè)帶有動(dòng)態(tài)切換效果面板的制作。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。