滑動條、進度條、進度環，是產品原型中比較常見的進度展示功能。今天筆者分享的是使用Axure原型工具實現兩種進度展示功能中相對複雜的交互效果。
因為會涉及多個頁面的值傳遞，我們使用Axure中的【全局變量】功能，來臨時存放每個進度條的值，這樣方便最後一步把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每個頁面都加一遍【下一步】。設置完畢後，此時你可以再預覽一下效果：
「可拖動、可顯示進度值、可計算多個頁面均值的滑動進度條功能」基本實現了。剩下只需要我們增加其他內容元件、設置一些美化效果。
倒計時邏輯：
①倒計時的取值範圍 =從10秒減到0秒；
②倒計時的速度 = 1s = 1000ms；
③自動倒計時的實現方法：通過動態面板的【循環設置】實現；
④倒計時數字=10秒-已旋轉的時間 = 10-（已旋轉角度/360）*10
進度環邏輯：
①進度底槽bottom、左遮蓋條coverLeft、右遮蓋條coverRight、左進度條left、右進度條right，層級順序：
②倒計時未開始時：白色【左右遮蓋條】分別遮住紫色【左右進度條】，此時頁面無任何進度條顯示；
③倒計時開始：【左進度條】順時針旋轉，紫色進度條慢慢出現，直到轉180度到右邊完全出現；【右進度條】順時針旋轉（同時【左遮蓋條】消失）出現，直到轉180度到完全出現；
④進度環每秒旋轉角度=360°除以10秒=36°/s。即：若預設每250毫秒旋轉一下下，那麼這一下下移動的角度應該是9°。
暫停和繼續的邏輯：
①點擊【暫停】：倒計時停止、暫停鍵隱藏、繼續播放鍵出現；
②點擊【繼續播放】：倒計時開始、繼續播放鍵隱藏、暫停鍵出現；
1、新建頁面並製作各元件
註：【動態面板DoingLoop】和【開始go】2個元件默認設置為「隱藏」
圓環製作方法：2個圓形重疊放置後全選，點「排除」按鈕即可：
半圓環製作方法：矩形和半圓環重疊放置後全選，點「去除」按鈕即可：
同理，你可以製作出暫停鍵、播放鍵的形狀哦。
2、動態面板的【循環設置】
①設置自動轉動的時間（動態面板設置【顯示時】交互）
設置【動態面板狀態】→勾選動態面板→Next/向後循環/250毫秒：
②設置自動轉動的角度（動態面板設置【狀態改變時】交互）
先設置【左進度條】旋轉到右邊時的條件（【左進度條】旋轉角度<180°時）：
if 「[[LVAR1.rotation]] 」 < 「180」
在該條件下，繼續設置【旋轉的方向/角度】：
根據之前的預計算：每循環一下是250毫秒，即每250毫秒旋轉一下下，這一下下移動的角度是9°。
③設置自動倒計時的數字（動態面板設置【狀態改變時】交互）
繼續在if 「[[LVAR1.rotation]] 」 < 「180」的條件下，通過【設置文本】動作來設置【實時倒計時數字】：
還記得我們製作前分析的「倒計時邏輯」嗎：
實時倒計時數字=10秒-已旋轉的時間 = 10-（已旋轉角度/360）*10
寫成函數表達就是：
實時倒計時數字=[[Math.ceil(10-10*(LVAR1.rotation + LVAR2.rotation)/360)]]
④同上，設置【右進度條】旋轉
增加一個新用例 if 「[[LVAR2.rotation]] 」 < 「180」 ， 該條件下設置隱藏【左遮蓋條】、【旋轉的方向/角度】、【實時倒計時數字】：
⑤最後設置旋轉完成後的情況
增加一個新用例 Else If Ture ，該條件下設置動態面板狀態為停止循環、隱藏動態面板：
我們總結一下【動態面板DoingLoop】處理的邏輯順利（如下圖）：
當【動態面板DoingLoop】顯示時
↓
【顯示時】交互設置生效
↓
自己開始Next循環 → 於是自己的狀態改變了
↓
【狀態改變時】交互設置生效
↓
用例1開始執行→進度條開始出現在右邊→進度條完全出現在右邊了
↓
用例4開始執行→進度條開始出現在左邊→進度條完全出現在左邊了
↓
用例2開始執行→【動態面板DoingLoop】停止循環
注意：用例的執行順序是按照【用例排列順序】至上而下執行的，和用例名稱數字沒關係。例如：【用例4】在【用例2】上方，【用例4】就會先執行。用例可以滑鼠按住直接拖動。
3、暫停鍵、繼續播放鍵的交互設置
4、啟動倒計時
因為倒計時的「250毫秒轉一下下」是靠【動態面板DoingLoop】在【顯示時】設置「Next向下循環」完成的，我們啟動倒計時就是要啟動【動態面板DoingLoop】顯示：
在第1步製作各元件時，我們已經把【動態面板DoingLoop】設置為【隱藏】了，所以只要再對整個頁面設置一下【頁面載入時】的交互事件，讓動態面板由【隱藏】→【顯示】，就算啟動成功了。
到此設置已全部完成，預覽一下吧~
作者：葛曉玲，一個網際網路重度依賴者。
本文由 @葛曉玲 原創發布於人人都是產品經理。未經許可，禁止轉載。
題圖來自PEXELS，基於CC0協議