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 ,其…

flask web学习之flask与http(四)

文章目录 一、重定向进阶功能1.1 重定向回上一个页面1.2 对URL进行安全验证 二、使用Ajax技术发送异步请求2.1 什么是Ajax2.2使用jQuery发送Ajax请求 三、服务器推送四、web安全规范1. 注入攻击2. XSS攻击3. CSRF攻击 一、重定向进阶功能 1.1 重定向回上一个页面 有时候&#…

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

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

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

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

【算法题】33. 搜索旋转排序数组

题目 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], ..., nums[n-1], nums[0], nums[…

Unity ShaderGraph 技能冷却转圈效果

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

Linux账户安全

一.Linux账户与组的基本概念 在Limux操作系统中&#xff0c;每一个文件和程序都归属于一个特定的 “用户”。每个用户都由一个唯一的身份来标识&#xff0c;这个标识称为用户ID (UserID, UID )。系统中的每一个用户也至少需要属于一个“用户分组”&#xff0c;即由系统管理员所…

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

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

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

【LeetCode 面试经典150题】27. Remove Element 移除元素

27. Remove Element 题目描述 Given an integer array nums and an integer val, remove all occurrences of val in nums in-place. The order of the elements may be changed. Then return the number of elements in nums which are not equal to val. Consider the num…

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

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

test ui-04-testcomplete 入门介绍

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

k8s的声明式资源管理

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

python股票分析挖掘预测金融大数据获取方法和实现(2)

本人股市多年的老韭菜了&#xff0c;各种股票分析书籍&#xff0c;技术指标书籍阅历无数&#xff0c;萌发想法&#xff0c;何不自己开发个股票预测分析软件&#xff0c;选择python因为够强大&#xff0c;它提供了很多高效便捷的数据分析工具包&#xff0c; 我们已经初步的接触…

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

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

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

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

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

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