在案例14中，昆明網(wǎng)站建設(shè)小編制作了滑動(dòng)開(kāi)鎖交互，但是當(dāng)slider_dp向左/向右拖動(dòng)時(shí)，它可以滑出 slider_bg（后面的背景圖像）的邊界，如圖9，在這個(gè)案例中，使用條件約束解決這個(gè)問(wèn)題。

這個(gè)問(wèn)題出現(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），見(jiàn)圖10。轉(zhuǎn)換為動(dòng)態(tài)面板之后的坐標(biāo)是（17，12），見(jiàn)圖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è)的下拉列表，選擇【值】，見(jiàn)圖12A。然后單擊【fx】，見(jiàn)圖12-B，在彈出的【編輯值】對(duì)話框中單擊【添加局部變量】，并按圖13所示操作，繼續(xù)單擊【插入變量或函數(shù)…】，在下拉列表中選擇局部變量LVAR1，并將其修改為[[LVAR1.x]]，見(jiàn)圖14。單擊【確定】按鈕回到【條件編輯器】，按圖15所示操作。

（圖10）

（圖11）

（圖12）

（圖13）

（圖14）

（圖15）

通過(guò)條件描述可以看出，昆明網(wǎng)站制作小編認(rèn)為此處條件的意思是，如果當(dāng)前部件（也就是slider_dp動(dòng)態(tài)面板）的x 坐標(biāo)如果小于17，單擊【確定】按鈕關(guān)閉【條件編輯器】。現(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），見(jiàn)圖 16。單擊【確定】按鈕關(guān)閉【用例編輯器】。

此時(shí)slider_dp部件的交互事件如圖17所示，單擊【預(yù)覽】按鈕后大家會(huì)發(fā)現(xiàn)，slider_dp圖標(biāo)向左拖動(dòng)的問(wèn)題依然存在。這是因?yàn)椤就蟿?dòng)時(shí)】事件中包含多個(gè)用例，而多用例的條件邏輯執(zhí)行順序還存在問(wèn)題，在后面章節(jié)中會(huì)對(duì)條件邏輯進(jìn)行詳細(xì)講解。

第三步：右鍵單擊【拖動(dòng)時(shí)】事件中的case2，在彈出的關(guān)聯(lián)菜單中選擇【切換為＜If＞或＜Else If＞】，見(jiàn)圖18。切換后如圖19所示，此時(shí)，當(dāng)拖動(dòng)事件執(zhí)行時(shí)，里面包含的兩個(gè)用例都會(huì)執(zhí)行。單擊【預(yù)覽】按鈕測(cè)試效果，此時(shí)向左拖動(dòng)已經(jīng)按照我們預(yù)設(shè)的約束條件生效。

（圖16）

（圖17）

（圖18）

（圖19）

對(duì)于剛剛接觸Axure的讀者來(lái)說(shuō)，上面的操作看上去比較復(fù)雜，其實(shí)很簡(jiǎn)單，用語(yǔ)言描述如下：當(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)位置，見(jiàn)本章圖11，以此來(lái)約束slider_dp不能滑出我們指定的坐標(biāo)位置。隨著你對(duì)Axure操作細(xì)節(jié)的熟悉和對(duì)Axure工作原理的理解，這些操作會(huì)變得越來(lái)越簡(jiǎn)單。下面繼續(xù)實(shí)現(xiàn)向右拖動(dòng)的約束。

第四步：當(dāng) slider_dp 向右拖動(dòng)時(shí)，其x坐標(biāo)不能大于 open部件的x坐標(biāo)位置，也就是 181，見(jiàn)圖20。語(yǔ)言描述如下：當(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。修改后見(jiàn)圖22。

（圖21）

第五步：在頂部的工具欄中單擊【預(yù)覽】按鈕，或者按下快捷鍵F5/Shift+Command+P，快速預(yù)覽交互效果。

（圖22）