滑動條、進度條、進度環，是產品原型中比較常見的進度展示功能。今天筆者分享的是使用Axure原型工具實現兩種進度展示功能中相對復雜的交互效果。
效果一、可拖動、可顯示進度值、可計算多個頁面均值的滑動進度條
實現效果
功能流程分析
因為會涉及多個頁面的值傳遞，我們使用Axure中的【全局變量】功能，來臨時存放每個進度條的值，這樣方便最後一步把5個進度值拿出來再次計算。
制作前分析
- 頁面：5個進度頁面，1個結果展示頁面；
- 拖動方向：進度可左右來回拖動；
- 主要元件（列出元件的同時可以提前想好元件命名）：進度底槽EvaluGap、進度按鈕EvaluSelect、進度值Score、下一步Next、全局變量EvaluScore、最後得分EvaluateScore；
- 計算邏輯1：進度值的取值範圍 = 從左到右為0-100分；
- 計算邏輯2：進度值 = （進度按鈕的橫向位置÷進度底槽的橫向寬度）*100；
- 計算邏輯3：最後得分 = 5個進度值的均值；
具體實現方法
1、新建頁面
直接點擊頁面區域的新增頁面按鈕，點6次，即可建好6個頁面。
2、制作進度條元件
①【進度底槽EvaluGap】
在Page1頁面中，將元件庫中的“矩形2”拖入編輯區左上角，設置寬度350*高度20，名稱命名為Evalu01Gap：
②【進度按鈕EvaluSelect】
將元件庫中的“橢圓形”拖入編輯區左上角，設置寬度20*高度20，名稱命名為Evalu01Select，可設置下顏色、與底槽做區別：
③【進度值Score】
④轉換為動態面板
全選這3個元件右鍵，點擊“轉換為動態面板”選項後，3個元件將一起生成為一個“動態面板”：
生成“動態面板”目的：在動態面板中，可以設置元件移動時的“水平拖動”效果。
3、設置進度條拖動事件
①雙擊動態面板屬性區域的【拖動時】，進入<拖動時>用例編輯頁面，點擊左側【移動】：
②勾選【進度按鈕EvaluSelect】，在右下方移動選項中選擇“水平拖動”，添加左右2個邊界，設置好後點確定：
進行到這一步，你可以預覽一下效果：左右拖動效果完成，且拖動範圍僅僅在進度底槽中。
4、設置進度條拖動時數值
①【進度值Score】默認值為“三級標題”，我們將雙擊它，將其改為“0”。
②雙擊動態面板“拖動時-Case1”再次進入<拖動時>用例編輯頁面，點擊左側【設置文本】，勾選【Score01】，點擊右下角【fx】按鈕：
③新打開的窗口，即編輯函數的窗口，我們先按照下圖，增加2個局部變量：
變量1（LVAR1）是“進度按鈕”，變量2（LVAR2）是“進度底槽”：
④把變量放進函數：
還記得我們制作前分析的“計算邏輯2”嗎：
計算邏輯2：
進度值 = （進度按鈕的橫向位置÷進度底槽的橫向寬度）*100
寫成Axure裏的函數表達式就是：
進度按鈕的橫向位置：LVAR1.x
進度底槽的橫向寬度：LVAR2.width
進度值 =[[math.ceil(100*(LVAR1.x)/(LVAR2.width-20))]]
註：因為進度按鈕的直徑是20，所以【進度底槽的橫向寬度】這裏要減20，這樣操作可以使【進度按鈕】拉到最右時，【進度值】正好是100。
設置完畢後，此時你可以再預覽一下效果：左右拖動效果完成，拖動同時顯示出進度值。
5、將【進度條拖動時數值】賦值給【全局變量】
①點擊【項目→全局變量】，新增一個全局變量，命名為Evalu01Score、確定：
②雙擊動態面板“拖動時-Case1”再次進入<拖動時>用例編輯頁面，點擊左側【設置變量值】，勾選全局變量【Evalu01Score】，將值設置為進度值【Score01】一樣即可：
6、復制Page1的操作到剩下4個頁面
略
7、設置最後得分EvaluateScore
①在Page6頁面中，將元件庫中的“矩形2”拖入編輯區，命名為EvaluateScore：
②點擊“右下角Page6→頁面載入時”進入用例編輯頁面，點擊左側【設置文本】、勾選矩形【EvaluateScore】，點擊右下角【fx】按鈕：
③函數編輯框中，輸入【5個進度值的均值】的函數：
[[Math.ceil(Evalu01Score+Evalu02Score+Evalu03Score+Evalu04Score+Evalu05Score)/5]]
8、設置頁面間的跳轉
①在Page1頁面中放置一個矩形，編輯文字為“下一步”：
②點擊“下一步”矩形的“鼠標點擊時”進入用例編輯頁面，點擊左側【打開鏈接】，選中Page2：
如法炮制，使Page1-Page5每個頁面都加一遍【下一步】。設置完畢後，此時你可以再預覽一下效果：
“ 可拖動、可顯示進度值、可計算多個頁面均值的滑動進度條功能 ”基本實現了。剩下只需要我們增加其他內容元件、設置一些美化效果。
效果二、可倒計時、可暫停、暫停後可繼續的進度環
實現效果
功能流程分析
制作前分析
- 頁面：1個展示頁面；
- 拖動方向：進度環形轉圈移動；
- 主要元件（列出元件的同時可以提前想好元件命名）：進度底槽bottom、遮蓋條coverLeft和coverRight、進度條left和right、倒計時時間Countdown、暫停pause、繼續播放go；
倒計時邏輯：
- 倒計時的取值範圍 =從10秒減到0秒；
- 倒計時的速度 = 1s = 1000ms；
- 自動倒計時的實現方法：通過動態面板的【循環設置】實現；
- 倒計時數字=10秒-已旋轉的時間 = 10-（已旋轉角度/360）*10
進度環邏輯：
①進度底槽bottom、左遮蓋條coverLeft、右遮蓋條coverRight、左進度條left、右進度條right，層級順序：
②倒計時未開始時：白色【左右遮蓋條】分別遮住紫色【左右進度條】，此時頁面無任何進度條;顯示
③倒計時開始：【左進度條】順時針旋轉，紫色進度條慢慢出現，直到轉180度到右邊完全出現；【右進度條】順時針旋轉（同時【左遮蓋條】消失）出現，直到轉180度到完全出現；
④進度環每秒旋轉角度=360°除以10秒=36°/s。即：若預設每250毫秒旋轉一下下，那麽這一下下移動的角度應該是9°。
暫停和繼續的邏輯：
- 點擊【暫停】：倒計時停止、暫停鍵隱藏、繼續播放鍵出現；
- 點擊【繼續播放】：倒計時開始、繼續播放鍵隱藏、暫停鍵出現；
具體實現方法
1、新建頁面並制作各元件
圓環制作方法：2個圓形重疊放置後全選，點“排除”按鈕即可：
半圓環制作方法：矩形和半圓環重疊放置後全選，點“去除”按鈕即可：
同理，你可以制作出暫停鍵、播放鍵的形狀哦。
2、動態面板的【循環設置】
①動態面板設置【顯示時】交互，設置【動態面板狀態】→勾選動態面板→Next/向後循環/250毫秒：
②設置動態面板的循環時的變化：
先設置【左進度條】旋轉到右邊時的條件（【左進度條】旋轉角度<180°時）：
if “[[LVAR1.rotation]] ” < “180”
再繼續設置狀態改變時（循環時），【旋轉的方向/角度】和【實時倒計時數字】：
根據之前的預計算：每循環一下是250毫秒，即每250毫秒旋轉一下下，這一下下移動的角度是9°。
還記得我們制作前分析的“倒計時邏輯”嗎：
實時倒計時數字=10秒-已旋轉的時間 = 10-（已旋轉角度/360）*10
寫成函數表達就是：
實時倒計時數字=[[Math.ceil(10-10*(LVAR1.rotation + LVAR2.rotation)/360)]]
同上，設置【右進度條】旋轉：
③最後設置一個旋轉完成後的情況：
設置動態面板狀態為停止循環、隱藏動態面板狀態：
3、暫停鍵、繼續播放鍵的交互設置
到此設置已全部完成，預覽一下吧~
作者：葛曉玲，一個互聯網重度依賴者，7年互聯網電商運營，互聯網產品轉型中。
本文由 @葛曉玲 原創發布於人人都是產品經理。未經許可，禁止轉載。
題圖來自PEXELS，基於CC0協議
Tags: 進度 頁面 元件 計算 滑動 拖動
文章來源：