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

目录

 

一、不可暂停进度条

1.1 前期准备

1.2 效果假想

1.3 适用场景

1.4 实现步骤

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

(2)给按钮添加交互

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

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

1.4 效果演示

二、可暂停进度条

2.1 效果假想

2.2 适用场景

2.3 实现步骤

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

(2)给按钮添加交互

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

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

2.4 效果演示


 

一、不可暂停进度条

1.1 前期准备

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

准备后效果:

f9125d904a4b4e1fb50309862e8d7b0f.png

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

1.2 效果假想

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

1.3 适用场景

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

1.4 实现步骤

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

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

9586d5f0808642a7ade13046cf6769f9.png

(2)给按钮添加交互

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

a154486fbe474c98b373631e79d2bcf4.png

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

操作如下:

4da3a16c372f433383ec1ec3ad7540d3.png

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

54fba2de2a8e4186936a163fb55cb554.gif

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

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

实现思路是:

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

实操如下:

e112b8aa4d29435b841a43cf1fd6c35a.png

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

fc9245edeaae473a991ac6c80aa4b82f.png

1.4 效果演示

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

c66cd4afb1984624968124f7785ab3e3.gif

二、可暂停进度条

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

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

2.1 效果假想

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

2.2 适用场景

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

2.3 实现步骤

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

注:

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

b7a5028aa05142a290d7da202e010c37.png

(2)给按钮添加交互

bb4dc5427ece430cbf9d8ad09b6142aa.png

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

1db9c6ce8ebd45bdac8ff4a37a720baf.png

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

c3e5fdccff5c4c98a520baa2737d5557.png

2.4 效果演示

cad80167cb214a71a49095279ff366ef.gif


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

9b15ab161d7844eca32ae3981dc0d3a4.png

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/592165.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎么快速修复mfc140.dll文件?解决mfc140.dll缺失的方法

面对计算机报告的 ​mfc140.dll​ 文件遗失错误,这通常表明系统中缺少一个关键的动态链接库文件,该文件对于运行以 Microsoft Foundation Class (MFC) 库编写的程序十分重要,尤其是那些需要图形界面的应用程序和一些游戏。若没有这个文件&…

每日一练:LeeCode-739. 每日温度(中)【单调栈】

本文是力扣LeeCode-739. 每日温度(中) 学习与理解过程,本文仅做学习之用,对本题感兴趣的小伙伴可以出门左拐LeeCode。 给定一个整数数组 temperatures ,表示每天的温度,返回一个数组 answer ,其…

是否需要跟上鸿蒙(OpenHarmony)开发岗位热潮?

前言 自打华为2019年发布鸿蒙操作系统以来,网上各种声音百家争鸣。尤其是2023年发布会公布的鸿蒙4.0宣称不再支持Android,更激烈的讨论随之而来。 本文没有宏大的叙事,只有基于现实的考量。 通过本文,你将了解到: Har…

虚幻UE 材质-进阶边界混合之WAT世界对齐纹理

边界混合前篇:虚幻UE 材质-边界混合之PDO像素深度偏移量 上一篇主要讲材质相似或者不同的两个物体之间的边界混合 这一篇主要讲自建材质且相同的两个物体之间的边界混合 文章目录 一、世界对齐纹理二、世界对齐纹理实验1、制作材质 三、进一步优化 一、世界对齐纹理…

Unity ShaderGraph 技能冷却转圈效果

Unity ShaderGraph 技能冷却转圈效果 前言项目场景布置代码编写ShaderGraph 连线总结 参考 前言 遇到一个需求,要展示技能冷却的圆形遮罩效果。 项目 场景布置 代码编写 Shader核心的就两句 // 将uv坐标系的原点移到纹理中心 float2 uv i.uv - float2(0.5, 0…

IIS通过ARR实现负载均衡

一、实现整体方式介绍 项目中部署在windows服务器上的项目,需要部署负载均衡,本来想用nginx来配置的,奈何iis上有几个项目,把80端口和443端口占用了,nginx就用不了了(因为通过域名访问的,必须要用80和443端口),只能通过IIS的方式实现了。 这里用2个服务在一台机器上…

【心得】PHP文件包含高级利用攻击面个人笔记

目录 一、nginx日志文件包含 二、临时文件包含 三、php的session文件包含 四、pear文件包含 五 、远程文件包含 文件包含 include "/var/www/html/flag.php"; 一 文件名可控 $file$_GET[file]; include $file.".php"; //用php伪协议 &#xff0…

【一文入门】Git常用命令集锦--分支操作和版本管理篇

前言 Git 是一种分布式版本控制系统,可以帮助团队协作开发、管理和维护代码,提高代码质量和效率,掌握常用版本管理命令可以帮助我们更好地管理代码变更和历史记录。下面我将介绍开发中常用的一些Git分支操作和版本管理命令 1 分支操作 1.1 …

PowerBI:如何在以SharePoint文件做为数据源?

问题描述: 有朋友最近询问,在PowerBI中如何以SharePoint中的文件做为数据源,进行报告的设计开发? 今天抽一些时间,为大家做一个样例,供大家参考。 解决方案: 找到将要使用的SharePoint中文件…

Alice Bob推出16量子比特量子处理单元——“Helium 1”

​(图片来源:网络) 容错量子计算机硬件开发商Alice & Bob宣布已成功流片一款新芯片“Helium 1”,希望能借助该芯片降低随着量子比特数增加而提高的错误率,这是该公司第一个纠错逻辑量子比特(纠错量子计…

test ui-04-testcomplete 入门介绍

About TestComplete TestComplete是一款适用于各种应用程序类型和技术的自动化测试环境,包括(但不限于)Windows、.NET、WPF、Visual C、Visual Basic、Delphi、CBuilder、Java以及Web应用程序和服务。 TestComplete既适用于功能测试&#x…

k8s的声明式资源管理

在k8s当中支持两种声明资源的方式: 1、 yaml格式:主要用于和管理资源对象 2、 json格式:主要用于在API接口之间进行消息传递 声明式管理方法(yaml)文件 1、 适合对资源的修改操作 2、 声明式管理依赖于yaml文件,所有的内容都…

DDD+SOA的事件驱动微服务读写分离架构

DDD DDD是Eric Evans于2003年出版的书名,同时也是这个架构设计方法名的起源 Eric Evans “领域驱动设计之父”,世界杰出软件建模专家。 他创建了Domain Language公司,致力于帮助公司机构创建与业务紧密相关的软件。 他在世界各地宣讲领域驱动…

DrGraph原理示教 - OpenCV 4 功能 - 二值化

二值化,也就是处理结果为0或1,当然是针对图像的各像素而言的 1或0,对应于有无,也就是留下有用的,删除无用的,有用的部分,就是关心的部分 在图像处理中,也不仅仅只是1或0,…

test dbtest-02-Liquibase 是一个数据库变更管理工具

拓展阅读 DbUnit-01-数据库测试工具入门介绍 database tool-01-flyway 数据库迁移工具介绍 什么是 Liquibase? Liquibase 是一种开源的数据库架构变更管理解决方案,它使你能够轻松地管理数据库变更的修订版本。 Liquibase使得参与应用程序发布流程的…

element-ui table-自定义表格某列的表头样式或者功能

自带表格 自定义表格某列的表头样式或者功能 <el-table><el-table-column :prop"date">//自定义表身每行数据<template slot-scope"scope">{{scope.row[scope.column.label] - ? - : scope.row[scope.column.label]}}</template>…

Java经典框架之SpringSecurity

SpringSecurity Java 是第一大编程语言和开发平台。它有助于企业降低成本、缩短开发周期、推动创新以及改善应用服务。如今全球有数百万开发人员运行着超过 51 亿个 Java 虚拟机&#xff0c;Java 仍是企业和开发人员的首选开发平台。 课程内容的介绍 1. SpringSecurity基本应用…

wps将姓名处理格式为:姓**

1.打开wps&#xff0c;在要处理数据右侧一个单元格 输入公式&#xff1a;LEFT(A1,1)&"**"&#xff0c;然后回车 2.按住ctrl和处理好的数据的右下角小方框&#xff0c;往下拖动即可生成格式为&#xff1a;姓** 格式的数据 3.复制生成的数据&#xff0c;右键选择 “…

springboot日志

1、日志用途 故障排查和调试&#xff1a;当项目出现异常或者故障时&#xff0c;日志记录可以快速帮助我们定位到异常的部分以及知道异常的原因。性能监测和优化&#xff1a;通过在关键代码路径中添加日志记录&#xff0c;可以了解应用程序的性能表现&#xff0c;并根据性能表…

MT8766安卓核心板规格参数_MTK8766核心板模块方案定制

MT8766安卓核心板&#xff1a;高性能、稳定可靠、集成度高的一体化解决方案 MT8766安卓核心板采用联发科MTK8766四核4G模块方案&#xff0c;是一款高度集成的安卓一体板。四核芯片架构&#xff0c;主频可达到2.0GHz&#xff0c;支持国内4G全网通。12nm制程工艺&#xff0c;支持…