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

news2024/12/24 20:27:40

目录

 

一、不可暂停进度条

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.coloradmin.cn/o/1350625.html

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

相关文章

计算机网络——传输层(五)

前言: 最重要的网络层我们已经学习完了,下面让我们再往上一层,对网络层的上一层传输层进行一个学习与了解,学习网络层的基本概念和网络层中的TCP协议和UDP协议 目录 ​编辑一、传输层的概述: 1.传输层: …

二叉树的前序遍历 、二叉树的最大深度、平衡二叉树、二叉树遍历【LeetCode刷题日志】

目录 一、二叉树的前序遍历 方法一:全局变量记录节点个数 方法二:传址调用记录节点个数 二、二叉树的最大深度 三、平衡二叉树 四、二叉树遍历 一、二叉树的前序遍历 方法一:全局变量记录节点个数 计算树的节点数: 函数TreeSize用于…

LLM之RAG理论(四)| RAG高级数据索引技术

本文将重新审视分块技术以及其他方法,包括查询增强、层次结构和知识图谱。 一、简单RAG架构快速概览 在2023年年初,我的主要关注点集中在Vector DB及其在更广泛的设计领域中的表现上。然而,随着2023年的收尾,这一领域出现了重大进…

Spring MVC - Controller的创建与使用

控制器Controller是处理器,是真正处理请求的组件 1 创建Controller 一般在src/main/java/com/qdu下建立一个controller包用来存放所有控制器。当创建一个控制器时,首先要记得使用Controller标记将该类注册成为一个控制器类。 然后在SpringMVCConfig类…

项目 杂碎 知识点 汇总!!!

Vue !!! setup生命周期 使用 nextTick !!获取节点 onMounted中可以使用JS,获取节点,setup生命周期无法获取节点 vue实现文本粘贴复制 Vue遍历对象 1、使用v-for指令:可以直接遍历对象的键和值 2、使用 Object.keys…

git基础概念和常用命令(日常开发收藏备用)

目录 ### 常用命令 ### 远程仓库与克隆 ### 分支管理 ### 子模块(Submodule) ### 其他高级操作 ### 交互式暂存(Interactive Staging) ### cherry-pick ### rebase ### reflog与reset ### 子树合并(Subtree …

【Maven】<scope>provided</scope>

在Maven中,“provided”是一个常用的依赖范围,它表示某个依赖项在编译和测试阶段是必需的,但在运行时则由外部环境提供,不需要包含在最终的项目包中。下面是对Maven scope “provided”的详细解释: 编译和测试阶段可用…

Vue3全局属性app.config.globalProperties

文章目录 一、概念二、实践2.1、定义2.2、使用 三、最后 一、概念 一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。点击【前往】访问官网 二、实践 2.1、定义 在main.ts文件中设置app.config.globalPropertie import {createApp} from vue import ElementPl…

.NET国产化改造探索(二)、银河麒麟安装人大金仓数据库

随着时代的发展以及近年来信创工作和…废话就不多说了,这个系列就是为.NET遇到国产化需求的一个闭坑系列。接下来,看操作。 上一篇介绍了如何安装银河麒麟操作系统,这篇文章详细介绍下如何在银河麒麟操作系统上安装人大金仓数据库。 准备安…

LangChain.js 实战系列:搭配 LangSmith 实现调试、监控、测试

📝 LangChain.js 是一个快速开发大模型应用的框架,它提供了一系列强大的功能和工具,使得开发者能够更加高效地构建复杂的应用程序。LangChain.js 实战系列文章将介绍在实际项目中使用 LangChain.js 时的一些方法和技巧。 LangSmith 是 LangCh…

RK3568平台开发系列讲解(Linux系统篇)PWM系统编程

🚀返回专栏总目录 文章目录 一、什么是PWM二、PWM相关节点三、PWM应用编程沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇将介绍 PWM 的系统编程。 一、什么是PWM PWM,即脉冲宽度调制(Pulse Width Modulation)

2023年下半年信息系统项目管理师考试

目录 引言 结果 论文 案例分析 综合知识 总结 引言 2023年下半年参加了信息系统项目管理师考试,考试结果情理之中,意料之外。论文压线,综合和案例差一分。从个人参加考试的整个过程来看,属于历史性的突破。以本文&#xff…

稳定币记录

稳定币: 稳定币(Stablecoin)是一种加密货币,其设计目的是维持相对稳定的价值,通常与某种法定货币(如美元、欧元)或其他资产(如黄金)挂钩。稳定币通过将加密货币与相应的…

详解Vue3中的鼠标事件mousemove、mouseover和mouseout

本文主要介绍Vue3中的常见鼠标事件mousemove、mouseover和mouseout。 目录 一、mousemove——鼠标移动事件二、mouseover——鼠标移入事件三、mouseout——鼠标移出事件 下面是Vue 3中常用的鼠标事件mousemove、mouseover和mouseout的详解。 一、mousemove——鼠标移动事件 鼠…

DevC++ easyx实现视口编辑--像素绘图板与贴图系统

到了最终成果阶段了,虽然中间有一些代码讲起来没有意思,纯靠debug,1-1解决贴图网格不重合问题,这次是一个分支结束。 想着就是把瓦片贴进大地图里。 延续这几篇帖子,开发时间也从2023年的4月16到了6月2号,80小时基本…

【K8S 部署】基于kubeadm搭建Kurbernetes集群

目录 一、基本架构 二、环境准备: 三、安装部署 1、所有节点安装docker 2、、所有节点安装kubeadm,kubelet和kubectl 3、配置网络--flannel 4、测试 pod 资源创建 四、安装部署与k8s集群对接的Harbor仓库 五、Dashboard安装部署: 一、基本架构…

jupyter notebook打开其他盘的文件

jupyter notebook打开其他盘文件 打开jupyter notebook打开terminal输入:jupyter-notebook 路径打开你想打开的工程的文件 打开jupyter notebook 打开terminal 输入:jupyter-notebook 路径 打开你想打开的工程的文件

【中小型企业网络实战案例 六】配置链路聚合

相关文章学习: 【中小型企业网络实战案例 五】配置可靠性和负载分担 热门IT课程【视频教程】(思科、华为、红帽、oracle等技术)https://xmws-it.blog.csdn.net/article/details/134398330?spm1001.2014.3001.5502 当CORE1或者CORE2的上…

【Elasticsearch源码】 分片恢复分析

带着疑问学源码,第七篇:Elasticsearch 分片恢复分析 代码分析基于:https://github.com/jiankunking/elasticsearch Elasticsearch 8.0.0-SNAPSHOT 目的 在看源码之前先梳理一下,自己对于分片恢复的疑问点: 网上对于E…

微服务雪崩问题及解决方案

雪崩问题 微服务中,服务间调用关系错综复杂,一个微服务往往依赖于多个其它微服务。 微服务之间相互调用,因为调用链中的一个服务故障,引起整个链路都无法访问的情况。 如果服务提供者A发生了故障,当前的应用的部分业务…