Axure8怎么实现简易的百分比进度条?

Axure8简易进度条主要目的：

1.对交互用例的熟悉

2.元件样式、布局工具数据

3.对变量的基本操作

一、分析

进度条：单位时间内加载内容在总内容的百分比。

单位时间：例子中设定为固定时间

完成总时间：为演示效果设定为5s

加载完成判断：元件 进度 的宽度等于背景的宽度。

二、界面布局

1、按照下图拖放控件：两个矩形、两个三级标题，并分别命名（标题、进度文本、进度、背景）

2、设定 进度 和 背景顶部对齐，背景设定xywh(坐标、宽、高：160 120 300 32),背景置于底部，进度设定xywh（161 121 1 30），进度颜色：#00FFFF。效果如下：

三、交互用例实现

1、添加交互用例：页面载入时，找到：元件--设置文本,设置元件：标题 的值为：“简易进度条”，具体如下图：

2、找到：元件--设置文本,设置元件：进度文本，设置为隐藏，具体见下图：

3、找到：元件--设置尺寸,设置元件：进度，设置：锚点：左侧，动画：线性，时间：5000ms,具体见下图：

4、点击 宽 后的"FX",设置载入时元件“进度” 的宽度，添加局部变量“jindu”,插入函数：[[jindu.width-2]]（减去2个像素是背景框的线宽），变量：jindu 设置方法见下图：

5、重要的一步：根据第二步（设置进度文本隐藏），在设置进度文本显示：具体见下图：

6、为进度文本 元件 添加交互用例：显示时

7、元件--设置文本   设置元件：进度文本 为：

[[Math.floor(pjindu.width/(pbeijing.width-2)*100)]]%

说明：变量 pjindu 为进度元件  变量 pbeijing为 背景框 元件。

Math.floor： 向上取整数

具体方法如下：

8、重要一步：添加 其他-等待 设置时间为0即可，

然后：

设置隐藏文本（隐藏进度文本）

设置显示文本  （显示进度文本）

四、预览

1、按下F5,预览。

注意事项：

1、交互用例的第八步 添加等待事件，可以删除以后进行测试效果如何。

2、对元件进行:隐藏 显示 在触发显示事件 进行刷新元件

3、Axure最小宽度必须为1，优化时可以先隐藏，然后再显示元件：进度

赞 (0)

相关推荐

  • Axure怎么设计点赞的百分比进度条?

    在投票类的网页中,点击“支持”按键后,不仅增加“被支持”一方的“投票”数量,还显示“投票”比例,该怎么制作这类的网页呢?具体效果图如下,详细操作请看下文详细介绍. “进度条”的基本制作原理,可先参考以 ...

  • 电脑Excel表格怎么制作百分比进度条

    电脑Excel表格怎么制作百分比进度条

    Excel是我们现在经常使用的办公软件,可以帮助我们处理很多的数据问题,今天小编跟大家分享下电脑Excel表格怎么制作百分比进度条.具体如下:1. 首先我们打开电脑,然后点击下方开始菜单,在打开的窗口 ...

  • excel表格百分比进度条怎么做

    excel进度条制作步骤如下: 我们先来观察一下最终效果图,图中红色方框里单元格里有柱状进度条,百分比显示数值.而我们就是要做出这种效果. 为了方便说明,我把上图中的表格复制,只是黏贴的时候选择只黏贴 ...

  • 如何给EXCEL单元格添加百分比进度条

    制作表格是纯文字的话,看着多多少少有些累,如果能加些直观的显示效果是最好的,下面来演示一下单元格添加进度条: 操作方法 01 首先要准备好表格,这里演示做个一个很简单的收款表,主要对最后一列进行操作: ...

  • Axure怎么制作百分比的进度条动画?

    进度条我们经常看到,想要使用axure制作一个百分比进度条动画效果,该怎么制作呢?下面我们就来看看详细的教程. 1.为了说明效果,特意放置了3条进度条,以示不同比例的效果,这里仅以一条进度条做范本,如 ...

  • Excel表格怎么将百分比显示为进度条呢？

    Excel通常用在统计数据中,那怎么把百分比用进度条显示出来呢? 方法: 01 新建Excel. 02 在Excel中输入需要整理的一些员工的姓名和员工所对应的绩效程度. 03 将完成的绩效的格式改为 ...

  • 怎么在excel单元格中按百分比显示进度条/柱形图

    直奔主题吧,对比下面两幅图中红色方框里的数据,哪一种更让你一目了然呢,很显然,是带有柱状进度条的那一幅可以一下子看出各行所占的比例等.那么怎么做出这种效果呢? 操作方法 01 我们先来观察一下最终效果 ...

  • Win10 Build 15014升级进度条没有用了吗 Win10 Build 15014升级很卡真的吗

    Win10 Build 15014进行更新后,不少小伙伴发现自己在进行更新之后进度条出现卡的现象,不知道是怎么回事,因此就让小编给大家详细的讲讲怎么解决的吧. Win10 Build 15014升级很 ...

  • 表格里的进度条怎么设置（wps完成进度条怎么做）

    表格里的进度条怎么设置（wps完成进度条怎么做）

    在做电子表格的时候,对于一些百分比的数据,如果能加上进度条,看起来就很直观了.下面我们就给大家介绍一下,其实只需要简单的几步,就可以给你的电子表格增色不少.1.首先用鼠标选中需要加进度条的数据.2.然 ...