Axure RP 9 Mac這款原型設計軟件能讓設計者快速創建應用軟件，或者在web網站的線框圖、流程圖、原型和規格的設計製作，從低到高的視覺和交互保真度的全方位構建，是目前業界首屈一指的交互式產品原型設計軟件！此次小編就帶大家來看看Axure RP如何做滑塊的水平拖動效果
1、案例效果：
初始狀態：
開啓功能時：
2、案例描述：
使用系統亮度時，滑塊位置與狀態條長度不可調節；取消系統亮度的勾選時，滑塊與狀態條變爲藍色，可以拖動滑塊位置改變狀態條長度。
元件準備：
頁面中：
動態面板“SliderPanel”中：
包含命名：
動態面板（用於拖動調節亮度的滑塊）：SliderPanel
矩形（用於調節線的背景）：BackgroundLine
矩形（用於亮度調節線）：BrightnessLine
3、思路分析：
點擊使用系統亮度的複選框，複選框切換顏色；（操作步驟1）
複選框被選中時，顯示勾選的圖標文字；（操作步驟2）
同時，滑塊和調節線變爲灰色；（操作步驟3）
複選框取消選中時，勾選圖標文字消失；（操作步驟4）
同時，滑塊和調節線變爲藍色；（操作步驟5）
拖動滑塊時，如果滑塊是藍色的狀態，則可以水平拖動，但不可超出背景線條的兩端；（操作步驟6）
同時，調節線跟隨滑塊的位置改變尺寸。（操作步驟7）
4、操作步驟：
1、爲自制複選框元件的【鼠標單擊時】事件添加“用例1”， 設置動作爲【切換選中狀態】於“當前元件”（This）；
2、爲自制複選框元件的【選中時】事件添加“用例1”， 設置動作爲【設置文本】於“當前元件”（This）爲【值】“ ok2”；“ok2 ”爲FontAwesome4.4.0圖標字體元件庫中的對號；
3、繼續上一步，添加動作【取消選中】元件“SliderPanel”和“BrightnessLine”；
4、爲自制複選框元件的【取消選中時】事件添加“用例1”， 設置動作爲【設置文本】於“當前元件”（This）爲【值】“”（空值）；
5、繼續上一步，添加動作【選中】元件“SliderPanel”和“BrightnessLine”；
事件交互設置：
6、爲動態面板“SliderPanel”的【拖動時】事件添加“用例1”，設置條件判斷【選中狀態】於“當前元件”（This）【==】【值】【true】；設置滿足條件時的動作爲【移動】“當前元件”（This）爲【水平拖動】；{界限}設置中，點擊【添加邊界】，設置【左側】【>=】“[[b.left]]”，【右側】【<=】“[[b.right]]”；公式中“b”爲局部變量，其內容爲元件“BackgroundLine”的對象實例；
7、繼續上一步，添加動作【設置尺寸】於元件“BrightnessLine”，{寬度}爲“[[This.x-Target.x]]”，{高度}爲“1”，【錨點】爲默認的【左上角】；公式“[[This.x-Target.x]]”可獲取當前元件x軸座標與目標元件x軸座標之間距離的長度。
事件交互設置：
以上就是小編爲大家帶來的Axure RP實例教程：滑塊的水平拖動效果。還有更多詳細、實用的功能以及相關軟件Axure RP 9Mac版獲取，大家快來Macdown.com自行探索一番吧。