当前位置: 首页 > news >正文

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

 

相关文章:

  • git 常用命令 提交commit
  • Python 工具 | pip 基本命令
  • leetcode算法题之递归--综合练习(二)
  • Go中interface != nil不一定不是nil
  • 【MySQL】MySQL 8+版本使用窗口函数可以减少一次连表操作(额外Avg函数和Using函数使用,Using关键字参考里自行了解)
  • ChatGPT在金融财务领域的10种应用方法
  • 柯桥学韩语【韩语网络用语】听说最近的年轻人都重视슬세권,역세권....吗?
  • vite4项目中,vant兼容750适配
  • C++中几个常用的类型选择模板函数
  • 【Java】java -jar 读取jar包之外的yml
  • 28 C++ 对象移动,移动构造函数,移动赋值运算符
  • 关于axios的二次封装
  • Kafka安全认证机制详解之SASL_PLAIN
  • Vue2/Vue3-插槽(全)
  • C++ KMP字符串 ||暴力算法 和 KMP算法模板题解法
  • .pyc 想到的一些问题
  • 【391天】每日项目总结系列128(2018.03.03)
  • 【前端学习】-粗谈选择器
  • 30秒的PHP代码片段(1)数组 - Array
  • Android路由框架AnnoRouter:使用Java接口来定义路由跳转
  • Angular 2 DI - IoC DI - 1
  • Angular 4.x 动态创建组件
  • Computed property XXX was assigned to but it has no setter
  • Flex布局到底解决了什么问题
  • flutter的key在widget list的作用以及必要性
  • HTTP请求重发
  • JavaScript 基本功--面试宝典
  • JavaScript 事件——“事件类型”中“HTML5事件”的注意要点
  • java概述
  • LeetCode算法系列_0891_子序列宽度之和
  • npx命令介绍
  • vue+element后台管理系统,从后端获取路由表,并正常渲染
  • vue-cli在webpack的配置文件探究
  • 基于组件的设计工作流与界面抽象
  • 极限编程 (Extreme Programming) - 发布计划 (Release Planning)
  • 实战|智能家居行业移动应用性能分析
  • 适配mpvue平台的的微信小程序日历组件mpvue-calendar
  • 思考 CSS 架构
  • 新版博客前端前瞻
  • 验证码识别技术——15分钟带你突破各种复杂不定长验证码
  • Nginx惊现漏洞 百万网站面临“拖库”风险
  • ​中南建设2022年半年报“韧”字当头,经营性现金流持续为正​
  • (2)STL算法之元素计数
  • (AtCoder Beginner Contest 340) -- F - S = 1 -- 题解
  • (C语言版)链表(三)——实现双向链表创建、删除、插入、释放内存等简单操作...
  • (ZT) 理解系统底层的概念是多么重要(by趋势科技邹飞)
  • (二)基于wpr_simulation 的Ros机器人运动控制,gazebo仿真
  • (六)库存超卖案例实战——使用mysql分布式锁解决“超卖”问题
  • (牛客腾讯思维编程题)编码编码分组打印下标题目分析
  • (三)elasticsearch 源码之启动流程分析
  • (四)JPA - JQPL 实现增删改查
  • (转)【Hibernate总结系列】使用举例
  • (转)大道至简,职场上做人做事做管理
  • (转)拼包函数及网络封包的异常处理(含代码)
  • (转)人的集合论——移山之道