在案例14中,昆明網(wǎng)站建設(shè)小編制作了滑動(dòng)開鎖交互,但是當(dāng)slider_dp向左/向右拖動(dòng)時(shí),它可以滑出 slider_bg(后面的背景圖像)的邊界,如圖9,在這個(gè)案例中,使用條件約束解決這個(gè)問題。
這個(gè)問題出現(xiàn)在拖動(dòng)slider_dp時(shí),所以我們要在【拖動(dòng)時(shí)】事件上尋找解決辦法。
(圖9)
第一步:在Axure設(shè)計(jì)區(qū)域同時(shí)選中slider_dp、open和slider_bg三個(gè)部件,單擊右鍵將其轉(zhuǎn)換為動(dòng)態(tài)面板,并給其命名為slide_unlock。此時(shí),slide_unlock動(dòng)態(tài)面板是里面三個(gè)部件的容器,而包含其中的三個(gè)部件的坐標(biāo)位置會(huì)發(fā)生變化。例如,將上述三個(gè)部件轉(zhuǎn)換為動(dòng)態(tài)面板之前,slider_dp的坐標(biāo)是(726, 449),見圖10。轉(zhuǎn)換為動(dòng)態(tài)面板之后的坐標(biāo)是(17,12),見圖11)。
第二步:雙擊slide_unlock動(dòng)態(tài)面板,在彈出的【動(dòng)態(tài)面板狀態(tài)管理】中雙擊state1,進(jìn)入狀態(tài)1視圖,選中slider_dp,在右側(cè)的部件【屬性】面板中雙擊【拖動(dòng)時(shí)】事件,在彈出的【用例編輯器】中單擊【添加條件】,在彈出的【條件編輯器】中點(diǎn)擊左側(cè)的下拉列表,選擇【值】,見圖12A。然后單擊【fx】,見圖12-B,在彈出的【編輯值】對(duì)話框中單擊【添加局部變量】,并按圖13所示操作,繼續(xù)單擊【插入變量或函數(shù)…】,在下拉列表中選擇局部變量LVAR1,并將其修改為[[LVAR1.x]],見圖14。單擊【確定】按鈕回到【條件編輯器】,按圖15所示操作。
(圖10)
(圖11)
(圖12)
(圖13)
(圖14)
(圖15)
通過條件描述可以看出,昆明網(wǎng)站制作小編認(rèn)為此處條件的意思是,如果當(dāng)前部件(也就是slider_dp動(dòng)態(tài)面板)的x 坐標(biāo)如果小于17,單擊【確定】按鈕關(guān)閉【條件編輯器】?,F(xiàn)在條件設(shè)置完畢,繼續(xù)在【用例編輯器】中新增【移動(dòng)】動(dòng)作,在右側(cè)【配置動(dòng)作】中勾選slider_dp動(dòng)態(tài)面板,并設(shè)置其移動(dòng)至“絕對(duì)”位置(x:17,y:13),見圖 16。單擊【確定】按鈕關(guān)閉【用例編輯器】。
此時(shí)slider_dp部件的交互事件如圖17所示,單擊【預(yù)覽】按鈕后大家會(huì)發(fā)現(xiàn),slider_dp圖標(biāo)向左拖動(dòng)的問題依然存在。這是因?yàn)椤就蟿?dòng)時(shí)】事件中包含多個(gè)用例,而多用例的條件邏輯執(zhí)行順序還存在問題,在后面章節(jié)中會(huì)對(duì)條件邏輯進(jìn)行詳細(xì)講解。
第三步:右鍵單擊【拖動(dòng)時(shí)】事件中的case2,在彈出的關(guān)聯(lián)菜單中選擇【切換為<If>或<Else If>】,見圖18。切換后如圖19所示,此時(shí),當(dāng)拖動(dòng)事件執(zhí)行時(shí),里面包含的兩個(gè)用例都會(huì)執(zhí)行。單擊【預(yù)覽】按鈕測試效果,此時(shí)向左拖動(dòng)已經(jīng)按照我們預(yù)設(shè)的約束條件生效。
(圖16)
(圖17)
(圖18)
(圖19)
對(duì)于剛剛接觸Axure的讀者來說,上面的操作看上去比較復(fù)雜,其實(shí)很簡單,用語言描述如下:當(dāng)拖動(dòng)slider_dp時(shí),如果slider_dp的x坐標(biāo)小于16,就移動(dòng)回(x:16,y:13)。這個(gè)坐標(biāo)位置,就是slider_dp的默認(rèn)位置,見本章圖11,以此來約束slider_dp不能滑出我們指定的坐標(biāo)位置。隨著你對(duì)Axure操作細(xì)節(jié)的熟悉和對(duì)Axure工作原理的理解,這些操作會(huì)變得越來越簡單。下面繼續(xù)實(shí)現(xiàn)向右拖動(dòng)的約束。
第四步:當(dāng) slider_dp 向右拖動(dòng)時(shí),其x坐標(biāo)不能大于 open部件的x坐標(biāo)位置,也就是 181,見圖20。語言描述如下:當(dāng)拖動(dòng)slider_dp時(shí),如果其x坐標(biāo)大于181,就將其移動(dòng)到指定坐標(biāo)位置(x:181,y:13),也就是open部件的坐標(biāo)位置。根據(jù)第三步中向左拖動(dòng)時(shí)的操作,繼續(xù)給slider_dp添加用例,如圖21。
(圖20)
至此,滑動(dòng)解鎖的交互案例就全部制作完畢了,在初學(xué)階段強(qiáng)烈建議大家養(yǎng)成給部件和用例命名的好習(xí)慣。這樣當(dāng)某個(gè)事件中包含多個(gè)用例時(shí),便于我們維護(hù)和更新,如圖21。修改后見圖22。
(圖21)
第五步:在頂部的工具欄中單擊【預(yù)覽】按鈕,或者按下快捷鍵F5/Shift+Command+P,快速預(yù)覽交互效果。
(圖22)
當(dāng)前文章標(biāo)題:案例15:完整的滑動(dòng)解鎖
當(dāng)前URL:http://www.gtalker.cn/news/wzzz/3416.html