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制作可暂停与不可暂停进度加载条 ,在后续的时间里,博主会努力持续更新,给大家带来更优质的作品!!!

相关推荐
GlueNa2SiO36 小时前
03-Flask模板引擎Jinja2详解
笔记·python·flask
Capricorn19887 小时前
解决全网抄 Karpathy 导致的 LLM Wiki 污染?基于知芽 Notebook Skill 的 raw/ 笔记法排障指南
大数据·论文阅读·人工智能·笔记·论文笔记
壹玖玖肆8 小时前
openGauss使用笔记
笔记
宵时待雨8 小时前
linux笔记归纳17:传输层协议UDP
linux·笔记·udp
噜~噜~噜~9 小时前
操作系统笔记-2.3.2.1 进程互斥的软件实现方法
笔记·操作系统
云贝教育-郑老师10 小时前
【麒麟服务器系统交付:一个DBA的六年信创实战笔记】
服务器·笔记·dba
玖玥拾11 小时前
LeetCode 392 判断子序列
笔记·算法·leetcode
摇滚侠11 小时前
《SpringBoot 3:入门与应用实战》第 7 章 AOP 思想与实现 阅读笔记 15
java·spring boot·笔记
摇滚侠12 小时前
《SpringBoot 3:入门与应用实战》第 7 章 AOP 思想与实现 阅读笔记 14
spring boot·笔记·后端
陈年老古董14 小时前
OpenCV图像处理笔记:图像拼接、答题卡识别与目标提取
人工智能·笔记·python·opencv·计算机视觉