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

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

（圖9）

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

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

（圖10）

（圖11）

（圖12）

（圖13）

（圖14）

（圖15）

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

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

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

（圖16）

（圖17）

（圖18）

（圖19）

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

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

（圖20）

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

（圖21）

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

（圖22）