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.rhkb.cn/news/229520.html

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

相关文章

android开发百度地图api实现定位图标随手机方向转动

该功能的实现依赖于手机中的传感器元件如陀螺仪、加速度计等,具体开发详见android的官方开发文档: 传感器概览 | Android 开发者 | Android Developershttps://developer.android.com/guide/topics/sensors/sensors_overview?hlzh-cn要自定义一个传…

zookeeper之集群搭建

1. 集群角色 zookeeper集群下,有3种角色,分别是领导者(Leader)、跟随着(Follower)、观察者(Observer)。接下来我们分别看一下这三种角色的作用。 领导者(Leader): 事务请求(写操作)的唯一调度者和处理者,保…

【Spring Security】认证之案例的使用、MD5加密、CSRF防御

目录 一、引言 1、什么是SpringSecurity认证 2、为什么使用SpringSecurity之认证 3、实现步骤 二、快速实现(案例) 1、添加依赖 2、配置 3、导入数据表及相关代码 4、创建登录页及首页 5、创建配置Controller 6、用户认证 6.1、用户对象User…

【LabVIEW FPGA入门】创建第一个LabVIEW FPGA程序

本教程仅以compactRIO(FPGA-RT)举例 1.系统配置 1.1软件安装 FPGA-RT 1. LabVIEW Development System (Full or Professional) 2. LabVIEW Real-Time Module 3. LabVIEW FPGA Module 4. NI-RIO drivers 1.2硬件配置 1.使用线缆连接CompactRIO至主机…

uniapp的css样式图片大小截图展示

目录 截取图片前截取图片后第一种方式&#xff1a;代码第二种方式&#xff1a;代码最后 截取图片前 截取图片后 第一种方式&#xff1a;代码 <view class"swiper-box-img"><image class"swiper-box-img-img" :src"item.file_path" mod…

ARM CCA机密计算架构软件栈之软件组件介绍

在本节中,您将了解Arm CCA的软件组件,包括Realm World和Monitor Root World。以下图表展示了Arm CCA系统中的软件组件: 在这个图表中,世界之间的边界显示为粗虚线。由较高权限的软件强制执行的较低权限软件组件之间的边界显示为细虚线。例如,非安全EL2处的虚拟机监视器强制…

java企业网站系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web企业网站系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0&…

Jenkins的Transfers路径怎么配置,解决Transfers配置不生效的问题

Transfers配置: 1.配置Source files: 要填写jar包的相对路径,从当前项目工作空间的根目录开始,看看我的工作空间你就懂了 !如图 我填的是 parent/build/libs/parent-1.0.0.jar,即不要 fdw1/ 的前缀 2.配置Remote directory: 远程目标文件夹,也就是你jar包要放到远程…

第一个Python程序

安装好python解释器之后呢&#xff0c;我们打开PyCharm 这里选择使用本地解释器 注意这个python.exe的路径&#xff0c;AppData是隐藏文件夹 创建完成项目之后&#xff0c;点击new->Python File 写入 print(hello world)输出

分布式【zookeeper面试题12连问】

1. 面试官&#xff1a;工作中使用过Zookeeper嘛&#xff1f;你知道它是什么&#xff0c;有什么用途呢&#xff1f; 「小菜鸡的我&#xff1a;」 有使用过的&#xff0c;使用ZooKeeper作为**「dubbo的注册中心」&#xff0c;使用ZooKeeper实现「分布式锁」**。ZooKeeper&#…

Kafka安全认证机制详解之SASL_PLAIN

一、概述 官方文档&#xff1a; https://kafka.apache.org/documentation/#security 在官方文档中&#xff0c;kafka有五种加密认证方式&#xff0c;分别如下&#xff1a; SSL&#xff1a;用于测试环境SASL/GSSAPI (Kerberos) &#xff1a;使用kerberos认证&#xff0c;密码是…

elasticsearch列一:索引模板的使用

概述 近期一直在负责es这块&#xff0c;就想着和大家分享一些使用经验&#xff0c;我们从存储、查询、优化、备份、运维等几个方面来做分享。今天咱们先看下如何更加合理的存储数据。 初见索引模板 记得刚接触es还是18年那会&#xff0c;项目上线后因一些原因导致日志这部分的…

C语言——小细节和小知识7

一、逆序字符串 1、递归1 #include <stdio.h> #include <string.h>void ReverseArray(char *str) {char temp *str;//1int len (int)strlen(str);*str *(str len - 1);//2*(str len - 1) \0;//3if(strlen(str 1) > 2)//只要字符串还大于2&#xff0c;就…

企业微信开发:自建应用:获取企业微信IP段(用于防火墙配置)

概述 在企业微信开发流程中&#xff0c;为了确保与企业微信API的网络通信安全&#xff0c;并适应防火墙配置要求&#xff0c;开发者需要获取企业微信API服务的IP地址范围。这样&#xff0c;仅允许与企业微信官方通信的合法请求通过防火墙&#xff0c;从而保障数据传输的安全性…

SpringBoot整合多数据源,并支持动态新增与切换

SpringBoot整合多数据源&#xff0c;并支持动态新增与切换 一、概述 在项目的开发过程中&#xff0c;遇到了需要从数据库中动态查询新的数据源信息并切换到该数据源做相应的查询操作&#xff0c;这样就产生了动态切换数据源的场景。为了能够灵活地指定具体的数据库&#xff0…

dyld: Library not loaded: /usr/lib/swift/libswiftCoreGraphics.dylib

更新Xcode14后低版本iPhone调试报错 dyld: Library not loaded: /usr/lib/swift/libswiftCoreGraphics.dylib Referenced from: /var/containers/Bundle/Application/…/….app/… Reason: image not found 这是缺少libswiftCoreGraphics库 直接导入libswiftCoreGraphics库即…

python小工具之弱密码检测工具

一、引用的python模块 Crypto&#xff1a; Python中一个强大的加密模块&#xff0c;提供了许多常见的加密算法和工具。它建立在pyc.ypodome或pyc.ypto等底层加密库之上&#xff0c;为Python程序员提供了简单易用的API&#xff0c;使其可以轻松地实现各种加密功能。 commands…

2024新年快乐

前言 2023年马上就要过去&#xff0c;希望2024年会越来越好&#xff0c;根据自己学的内容来实现一些我的idea。 单片机 思路 最开始的构思是这样的&#xff0c;“2024”用数码管来输出然后中文的“新年快乐”用点阵来实现&#xff0c;但是点阵是动态的截图不好看&#xff0…

Jenkins部署项目

一.安装jenkins 1.1进入jenkins官网下载jenkins war包&#xff0c;上传到服务器/usr/local目录。 1.2执行启动jenkins命令&#xff0c;&#xff08;注意jenkins版本需要的jdk版本&#xff09; /usr/local/java11/bin/java -Djava.awt.headlesstrue -jar /usr/local/jenkins.wa…

【Linux】进程控制深度了解

> 作者简介&#xff1a;დ旧言~&#xff0c;目前大二&#xff0c;现在学习Java&#xff0c;c&#xff0c;c&#xff0c;Python等 > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;熟练掌握Linux下的进程控制 > 毒鸡汤&#xff…