手把手教你制作axure进度条 axure进度条怎么做

大家好，我是日常君，经常会和大家分享一些产品日常的工作心得。今天和大家分享一个AXURE进度条动画的制作流程。进度条的动画涉及到了动态面板、参数变量等较为进阶的功能使用，是很好的学习案例。这里就用AXURE来制作一个实际工作中制作的原型。

实际需求：某金融端是一个专业投资者使用的证券金融终端，主要提供全面、可靠的授权研究报告，以及基于研报数据衍生出专业的一致预期数据，还有高效的股票分析工具。目前在版本升级时，用户不了解新版本更新了什么内容，因此我们需要在升级的整个过程中让用户了解新版本的升级内容。

自动完成下载后提示版本更新内容

点击立即安装更新，则将安装更新，就到了我们安装页面，到了本文正题：

安装完成后，即进度到了100%之后，将出现安装完成按钮：

下面是制作进度条效果的步骤：

1. 页面载入时设置进度条：

新建一个页面，添加一个进度条背景（bg）：

使用图形原件

添加一个进度条（jdt），采用动态面板，高度以bg一致，宽度随意：

将jdt设置为隐藏

设置页面载入时，

其中第二步将进度条初始化为ba的1%宽度。

2. 设置进度条动画和百分比数值

当页面载入时，会改变进度条状态，因此可以通过设置动态面板变化时触发的动作，如下：

但页面载入时仅触发一次，而后的进度条自动变宽，则需要通过设置“改变大小时”的动作来实现循环：

3. 100%进度后出现“完成打开”按钮，让用户查看更新的内容之后，用户点击才能登陆软件。就有让用户主动关注更新内容的机会：