Axure RP實例教程：滑塊的水平拖動效果

Axure RP 9 Mac這款原型設計軟件能讓設計者快速建立應用軟件，或者在web網站的線框圖、流程圖、原型和規格的設計製做，從低到高的視覺和交互保真度的全方位構建，是目前業界數一數二的交互式產品原型設計軟件！這次小編就帶你們來看看Axure RP如何作滑塊的水平拖動效果

一、案例效果：

初始狀態：

開啓功能時：

二、案例描述：

使用系統亮度時，滑塊位置與狀態條長度不可調節；取消系統亮度的勾選時，滑塊與狀態條變爲藍色，能夠拖動滑塊位置改變狀態條長度。

元件準備：

頁面中：

動態面板「SliderPanel」中：

包含命名：

動態面板（用於拖動調節亮度的滑塊）：SliderPanel

矩形（用於調節線的背景）：BackgroundLine

矩形（用於亮度調節線）：BrightnessLine

三、思路分析：

點擊使用系統亮度的複選框，複選框切換顏色；（操做步驟1）

複選框被選中時，顯示勾選的圖標文字；（操做步驟2）

同時，滑塊和調節線變爲灰色；（操做步驟3）

複選框取消選中時，勾選圖標文字消失；（操做步驟4）

同時，滑塊和調節線變爲藍色；（操做步驟5）

拖動滑塊時，若是滑塊是藍色的狀態，則能夠水平拖動，但不可超出背景線條的兩端；（操做步驟6）

同時，調節線跟隨滑塊的位置改變尺寸。（操做步驟7）

四、操做步驟：

一、爲自制複選框元件的【鼠標單擊時】事件添加「用例1」， 設置動做爲【切換選中狀態】於「當前元件」（This）；

二、爲自制複選框元件的【選中時】事件添加「用例1」， 設置動做爲【設置文本】於「當前元件」（This）爲【值】「 ok2」；「ok2 」爲FontAwesome4.4.0圖標字體元件庫中的對號；

三、繼續上一步，添加動做【取消選中】元件「SliderPanel」和「BrightnessLine」；

四、爲自制複選框元件的【取消選中時】事件添加「用例1」， 設置動做爲【設置文本】於「當前元件」（This）爲【值】「」（空值）；

五、繼續上一步，添加動做【選中】元件「SliderPanel」和「BrightnessLine」；

事件交互設置：

六、爲動態面板「SliderPanel」的【拖動時】事件添加「用例1」，設置條件判斷【選中狀態】於「當前元件」（This）【==】【值】【true】；設置知足條件時的動做爲【移動】「當前元件」（This）爲【水平拖動】；{界限}設置中，點擊【添加邊界】，設置【左側】【>=】「[[b.left]]」，【右側】【<=】「[[b.right]]」；公式中「b」爲局部變量，其內容爲元件「BackgroundLine」的對象實例；

七、繼續上一步，添加動做【設置尺寸】於元件「BrightnessLine」，{寬度}爲「[[This.x-Target.x]]」，{高度}爲「1」，【錨點】爲默認的【左上角】；公式「[[This.x-Target.x]]」可獲取當前元件x軸座標與目標元件x軸座標之間距離的長度。

事件交互設置：

以上就是小編爲你們帶來的Axure RP實例教程：滑塊的水平拖動效果。還有更多詳細、實用的功能以及相關軟件Axure RP 9Mac版獲取，你們快來Macdown.com自行探索一番吧。