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

這個(gè)問(wèn)題出現在拖動(dòng)slider_dp時(shí)，所以我們要在【拖動(dòng)時(shí)】事件上尋找解決辦法。

（圖9）

第一步：在A(yíng)xure設計區域同時(shí)選中slider_dp、open和slider_bg三個(gè)部件，單擊右鍵將其轉換為動(dòng)態(tài)面板，并給其命名為slide_unlock。此時(shí)，slide_unlock動(dòng)態(tài)面板是里面三個(gè)部件的容器，而包含其中的三個(gè)部件的坐標位置會(huì )發(fā)生變化。例如，將上述三個(gè)部件轉換為動(dòng)態(tài)面板之前，slider_dp的坐標是（726， 449），見(jiàn)圖10。轉換為動(dòng)態(tài)面板之后的坐標是（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，在右側的部件【屬性】面板中雙擊【拖動(dòng)時(shí)】事件，在彈出的【用例編輯器】中單擊【添加條件】，在彈出的【條件編輯器】中點(diǎn)擊左側的下拉列表，選擇【值】，見(jiàn)圖12A。然后單擊【fx】，見(jiàn)圖12-B，在彈出的【編輯值】對話(huà)框中單擊【添加局部變量】，并按圖13所示操作，繼續單擊【插入變量或函數…】，在下拉列表中選擇局部變量LVAR1，并將其修改為[[LVAR1.x]]，見(jiàn)圖14。單擊【確定】按鈕回到【條件編輯器】，按圖15所示操作。

（圖10）

（圖11）

（圖12）

（圖13）

（圖14）

（圖15）

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

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

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

（圖16）

（圖17）

（圖18）

（圖19）

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

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

（圖20）

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

（圖21）

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

（圖22）