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

這個問題出現(xiàn)在拖動slider_dp時，所以我們要在【拖動時】事件上尋找解決辦法。

（圖9）

第一步：在Axure設(shè)計區(qū)域同時選中slider_dp、open和slider_bg三個部件，單擊右鍵將其轉(zhuǎn)換為動態(tài)面板，并給其命名為slide_unlock。此時，slide_unlock動態(tài)面板是里面三個部件的容器，而包含其中的三個部件的坐標(biāo)位置會發(fā)生變化。例如，將上述三個部件轉(zhuǎn)換為動態(tài)面板之前，slider_dp的坐標(biāo)是（726， 449），見圖10。轉(zhuǎn)換為動態(tài)面板之后的坐標(biāo)是（17，12），見圖11）。

第二步：雙擊slide_unlock動態(tài)面板，在彈出的【動態(tài)面板狀態(tài)管理】中雙擊state1，進(jìn)入狀態(tài)1視圖，選中slider_dp，在右側(cè)的部件【屬性】面板中雙擊【拖動時】事件，在彈出的【用例編輯器】中單擊【添加條件】，在彈出的【條件編輯器】中點擊左側(cè)的下拉列表，選擇【值】，見圖12A。然后單擊【fx】，見圖12-B，在彈出的【編輯值】對話框中單擊【添加局部變量】，并按圖13所示操作，繼續(xù)單擊【插入變量或函數(shù)…】，在下拉列表中選擇局部變量LVAR1，并將其修改為[[LVAR1.x]]，見圖14。單擊【確定】按鈕回到【條件編輯器】，按圖15所示操作。

（圖10）

（圖11）

（圖12）

（圖13）

（圖14）

（圖15）

通過條件描述可以看出，昆明網(wǎng)站制作小編認(rèn)為此處條件的意思是，如果當(dāng)前部件（也就是slider_dp動態(tài)面板）的x 坐標(biāo)如果小于17，單擊【確定】按鈕關(guān)閉【條件編輯器】?，F(xiàn)在條件設(shè)置完畢，繼續(xù)在【用例編輯器】中新增【移動】動作，在右側(cè)【配置動作】中勾選slider_dp動態(tài)面板，并設(shè)置其移動至“絕對”位置（x:17，y:13），見圖 16。單擊【確定】按鈕關(guān)閉【用例編輯器】。

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

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

（圖16）

（圖17）

（圖18）

（圖19）

對于剛剛接觸Axure的讀者來說，上面的操作看上去比較復(fù)雜，其實很簡單，用語言描述如下：當(dāng)拖動slider_dp時，如果slider_dp的x坐標(biāo)小于16，就移動回（x:16，y:13）。這個坐標(biāo)位置，就是slider_dp的默認(rèn)位置，見本章圖11，以此來約束slider_dp不能滑出我們指定的坐標(biāo)位置。隨著你對Axure操作細(xì)節(jié)的熟悉和對Axure工作原理的理解，這些操作會變得越來越簡單。下面繼續(xù)實現(xiàn)向右拖動的約束。

第四步：當(dāng) slider_dp 向右拖動時，其x坐標(biāo)不能大于 open部件的x坐標(biāo)位置，也就是 181，見圖20。語言描述如下：當(dāng)拖動slider_dp時，如果其x坐標(biāo)大于181，就將其移動到指定坐標(biāo)位置（x:181，y:13），也就是open部件的坐標(biāo)位置。根據(jù)第三步中向左拖動時的操作，繼續(xù)給slider_dp添加用例，如圖21。

（圖20）

至此，滑動解鎖的交互案例就全部制作完畢了，在初學(xué)階段強烈建議大家養(yǎng)成給部件和用例命名的好習(xí)慣。這樣當(dāng)某個事件中包含多個用例時，便于我們維護(hù)和更新，如圖21。修改后見圖22。

（圖21）

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

（圖22）