大家好，我是日常君，經常會和大家分享一些產品日常的工作心得。今天和大家分享一個AXURE進度條動畫的製作流程。進度條的動畫涉及到了動態面板、參數變數等較為進階的功能使用，是很好的學習案例。這裡就用AXURE來製作一個實際工作中製作的原型。
實際需求：某金融端是一個專業投資者使用的證券金融終端，主要提供全面、可靠的授權研究報告，以及基於研報數據衍生出專業的一致預期數據，還有高效的股票分析工具。目前在版本升級時，用戶不了解新版本更新了什麼內容，因此我們需要在升級的整個過程中讓用戶了解新版本的升級內容。
自動完成下載後提示版本更新內容
點擊立即安裝更新，則將安裝更新，就到了我們安裝頁面，到了本文正題：
安裝完成後，即進度到了100%之後，將出現安裝完成按鈕：
下面是製作進度條效果的步驟：
1. 頁面載入時設置進度條：
新建一個頁面，添加一個進度條背景（bg）：
使用圖形原件
添加一個進度條（jdt），採用動態面板，高度以bg一致，寬度隨意：
將jdt設置為隱藏
設置頁面載入時，
其中第二步將進度條初始化為ba的1%寬度。
2. 設置進度條動畫和百分比數值
當頁面載入時，會改變進度條狀態，因此可以通過設置動態面板變化時觸發的動作，如下：
但頁面載入時僅觸發一次，而後的進度條自動變寬，則需要通過設置「改變大小時」的動作來實現循環：
3. 100%進度後出現「完成打開」按鈕，讓用戶查看更新的內容之後，用戶點擊才能登陸軟體。就有讓用戶主動關注更新內容的機會：
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/323366.html
微信掃一掃 
支付寶掃一掃 