• 版本：Axure RP 8.0.0.3303
• 內容介紹：發現新版本後，隨機一個新版本的大小，做一個進度更新，從0%到100%；

一、繪製界面和控件佈局

1. 增加1個標籤，用來提示有新版本，文本為“發現新版本”；
2. 增加1個動態面板，用來做更新狀態，
3. 動態面板：增加標籤，用來數字顯示進度，匹配進度條進度；
4. 動態面板：增加一個矩形框“立即更新”，用來啟動更新；
5. 動態面板：增加矩形框，作為進度槽，即總長度；
6. 動態面板：增加矩形框，作為進度條(初始長度為1)，即當進度條進度覆蓋進度槽，表示100%；
7. “立即更新”、“進度槽”、“進度條”三個重疊；

主界面

動態面板更新

二、給“發現新版本”做交互

• 分析：這裡要達到2個目的，一是隨機一個新版本大小，二是設置進度0%與進度條為1(即初始化)；

1. 做“發現新版本”交互，設置動態面板中版本大小為"[[((Math.random()*2000)/100).toFixed(2)]]M"這裡用random產生一個隨機數，乘以2000放大隨機數併除100，toFixed(2)來保留2位小數。

新版本交互

三、給“版本更新”做交互

• 分析：單擊“立即更新”，需要讓進度覆蓋進度條，過程中數值顯示覆蓋進度。

1. 做“立即更新”交互，“鼠標單擊時”，隱藏“立即更新”矩形框，設定進度條覆蓋進度槽的速度(時間)；同時對進度(數字進度)做顯示，並對進度做“顯示”交互；
2. 做“進度”的“顯示時”交互，因為已經設定了進度條覆蓋進度槽時間，所以計算覆蓋的佔比來顯示數值進度，即進度=[[math.ceil(100*LVAR1.width/LVAR2.width)]]%，即進度條寬度/進度槽寬度乘以100作為百分比顯示；

立即更新交互

進度交互

四、視頻演示