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

目录

一、不可暂停进度条

[1.1 前期准备](#1.1 前期准备)

[1.2 效果假想](#1.2 效果假想)

[1.3 适用场景](#1.3 适用场景)

[1.4 实现步骤](#1.4 实现步骤)

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

(2)给按钮添加交互

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

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

[1.4 效果演示](#1.4 效果演示)

二、可暂停进度条

[2.1 效果假想](#2.1 效果假想)

[2.2 适用场景](#2.2 适用场景)

[2.3 实现步骤](#2.3 实现步骤)

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

(2)给按钮添加交互

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

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

[2.4 效果演示](#2.4 效果演示)


一、不可暂停进度条

1.1 前期准备

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

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

1.2 效果假想

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

1.3 适用场景

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

1.4 实现步骤

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

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

(2)给按钮添加交互

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

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

操作如下:


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

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

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

实现思路是:

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


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

1.4 效果演示

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

二、可暂停进度条

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

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

2.1 效果假想

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

2.2 适用场景

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

2.3 实现步骤

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

注:

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

(2)给按钮添加交互

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

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

2.4 效果演示


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

相关推荐
广州智造2 小时前
OptiStruct实例:3D实体转子分析
数据库·人工智能·算法·机器学习·数学建模·3d·性能优化
码农黛兮_462 小时前
4. 文字效果/2D-3D转换 - 3D翻转卡片
3d·html·css3
愚戏师7 小时前
Linux复习笔记(六)shell编程
linux·笔记·shell
.(ᗜ ˰ ᗜ) .7 小时前
机器学习笔记2
笔记
小葡萄20258 小时前
黑马程序员c++2024版笔记 第一章 变量和基本类型
笔记·c++20
顾子茵8 小时前
计算机图形学基础--Games101笔记(一)数学基础与光栅化
笔记·图形渲染
黄暄8 小时前
初识计算机网络。计算机网络基本概念,分类,性能指标
笔记·学习·计算机网络·考研
WarPigs8 小时前
Unity光照笔记
笔记·unity·游戏引擎
游戏新手村9 小时前
产品经理如何做好需求管理
产品经理·需求分析
Alice-YUE9 小时前
【HTML5学习笔记1】html标签(上)
前端·笔记·学习·html·html5