Axure骚操作:【制作可暂停与不可暂停进度加载条】

目录

一、不可暂停进度条

[1.1 前期准备](#1.1 前期准备)

[1.2 效果假想](#1.2 效果假想)

[1.3 适用场景](#1.3 适用场景)

[1.4 实现步骤](#1.4 实现步骤)

(1)除按钮外的元件设置隐藏

(2)给按钮添加交互

(3)给变量值文本标签添加交互

(4)给进度条矩形添加交互

[1.4 效果演示](#1.4 效果演示)

二、可暂停进度条

[2.1 效果假想](#2.1 效果假想)

[2.2 适用场景](#2.2 适用场景)

[2.3 实现步骤](#2.3 实现步骤)

(1)除按扭外的元件设置隐藏

(2)给按钮添加交互

(3)给变量值文本标签添加交互

(4)给进度条矩形添加交互

[2.4 效果演示](#2.4 效果演示)


一、不可暂停进度条

1.1 前期准备

  1. 两个矩形元件(两个颜色不同的进度条)
  2. 一个下载按钮(即进度条开始按钮)
  3. 两个文本标签(即进度值,两个文本标签内分别存放0和百分号%)
    准备后效果:

将两个进度条放置到同一位置后即可开始添加下载按钮的交互事件了。

1.2 效果假想

  • 点击按钮时,进度值和进度条进行从0%到100%的同步增加(中途不可暂停)。

1.3 适用场景

不可暂停进度条适用于页面加载过程中等待的时候。

1.4 实现步骤

(1)除按钮外的元件设置隐藏

先把除按钮之外的其他元件设置隐藏,如下:

(2)给按钮添加交互

给除按钮之外的其他元件设置隐藏后,我们就可以给按钮添加交互了,如下:

(3)给变量值文本标签添加交互

操作如下:


完成到这里,我们就可以进行预览,看看交互功能有无问题,预览如下:

可以看到变量值的自增长没有问题,然后就可以进行进度条的交互添加了。

(4)给进度条矩形添加交互

实现思路是:

给其中一个矩形设置宽度为0,再将元件显示时的尺寸设置为400,然后将元件的动画设置为线性,并且设置动画持续时间为5000毫秒(前面进度值设置的是50毫秒+1%,进度条的动画持续时间就设置成50x100)。
实操如下:


然后最后一步就是,当变量值与进度条加载完成之后,我们的下载按钮中的文本需要变为"完成",操作如下:

1.4 效果演示

最后成果的预览效果如下:

二、可暂停进度条

准备元件跟不可暂停的进度条的元件一致,只是多了个矩形来充当全局变量。

所以可暂停进度条我做的跟不可暂停进度条样式是一样尺寸的。

2.1 效果假想

  1. 当我们点击下载时,进度值和进度条会显示并且进度值与进度条同步从0%增加到100%。(中途未做出任何动作时)
  2. 如果我们在进度条加载0%到100%还未完成时,再次点击按钮,进度条与进度值会暂停,即跟我们下载软件程序一样,可以通过自己手动去强制暂停安装包的下载任务。
  3. 并且在我们手动暂停下载进度条之后,再次点击按钮,使还未完成的进度条可以继续走下去。

2.2 适用场景

下载软件安装包时的手动暂停页面等。

2.3 实现步骤

(1)除按扭外的元件设置隐藏

注:

跟不可暂停进度条不同的是,在进度条的下方我多添加了一个矩形并设置为隐藏。(我给它的命名为代表全局变量的矩形)。

(2)给按钮添加交互

(3)给变量值文本标签添加交互

(4)给进度条矩形添加交互

2.4 效果演示


今天Axure的拓展就到这里,这一期给大家分享了Axure制作可暂停与不可暂停进度加载条 ,在后续的时间里,博主会努力持续更新,给大家带来更优质的作品!!!

相关推荐
闪闪发亮的小星星4 天前
高斯光以及高斯光公式解释
笔记
cqbzcsq4 天前
CellFlow虚拟细胞论文阅读
论文阅读·人工智能·笔记·学习·生物信息
阿米亚波4 天前
【Windows】QEMU 启动 openEuler aarch64/arm64 架构系统 + 离线软件源
linux·windows·经验分享·笔记·架构·arm
自传.4 天前
尚硅谷 Vibe Coding|第三章(1) Claude Code深度使用与进阶技巧 学习笔记
笔记·学习·尚硅谷·vibecoding
.千余4 天前
【C++】模板进阶全解:非类型参数|全特化|偏特化|分离编译完全指南
开发语言·c++·笔记·学习·其他
自传.4 天前
尚硅谷 Vibe Coding|第二章 AI编程工具生态 学习笔记
笔记·学习·ai编程·尚硅谷·vibe coding
秋波。未央4 天前
Java Agent 开发 · Day 1 学习笔记(含作业完整标准答案)
java·笔记·学习
UXbot4 天前
帮助企业低门槛开展AI应用开发的平台推荐
前端·低代码·ui·交互·产品经理·原型模式·web app
中屹指纹浏览器4 天前
2026指纹浏览器字体指纹、字体渲染偏差检测与全维度虚拟字体池搭建方案
经验分享·笔记