快好知 kuaihz

如何用Axure制作匀速环形进度条?

在各类产品中,关于进度条的展现方式各异,而笔者选择了常见的匀速环形进度条,向我们展示了用Axure制作的要点与逻辑。

01 最终效果

元件加载环形(圆形)进度条自动增长(匀速)

百分比数值跟随变化

进度条增长到一定长度停止增长(百分比跟随停止)

02 注意事项

本教程用Axure9作为教程说明工具(Axure8可适用)

本教程对于Axure基本操作不做赘述

03 制作难点

实现思路的逻辑(循环事件的应用)

全局变量与交互事件的应用

04 元件准备

图中带有闪电标识表示有创建交互事件的元件

05 交互逻辑思路

1. 元件载入(2号元件)设置文本框(5号元件)的文本为 0

说明a:文本框(5号元件文本默认文本不为0,此时设置为0,即改变了文本框(5号元件)的文本

说明b:当文本框(5号元件文本改变时,同时执行百分比文本标签(6号元件)百分比数值匀速增长和环形(圆形)进度条同速度匀速增长。

2. 怎么实现百分比文本标签(6号元件)百分比数值匀速增加?

文本框(5号元件)设置如果全局变量的值小于97,那么执行等待37毫秒。

设置全局变量的数值加1(全局变量初始值为0);

设置百分比的数值部分为全局变量的数值;

设置文本框(5号元件)的文本为全局变量。

说明a:等待37毫秒的37毫秒怎么来的?

设计环形(圆形)进度条如果自增长至圆环的时间为4000毫秒,对应百分比数值为100%,那么百分比数值增加1%,用的时间为4000/100=40毫秒。

经实际测试,40毫秒调整为37毫秒,百分比数值增长与环形(圆形)进度条增长速度一致。(为什么,作者也没搞明白,有知道的告诉我)

说明b:百分比增长是什么原理实现的?

文本框(5号元件文本改变时就设置全局变量加1,紧接着设置新的全局变量给文本框 (5号元件),从而导致文本框(5号元件文本改变时,从而又执行一次此事件,形成循环事件。

3. 怎么实现环形(圆形)进度条的自增长?

紧接着步骤1,元件载入(2号元件)设置文本框(5号元件)的文本为0;

旋转右侧半圆180度,匀速用时2000毫秒;

等待2000毫秒 旋转左侧半圆169.2度,用时1880毫秒。

说明a:旋转左侧半圆为什么169.2度,用时1880毫秒?

最终效果需要在百分比97%已经对应环形(圆形)进度条97%的位置停止自增长。

360度对应圆环100%,97%圆环对应349.2度,右侧半圆全部走完180度,左侧半圆剩下349.2-180=169.2度。

4000毫秒对应圆环100%,97%圆环对应3880毫秒。右侧半圆全部走完需要2000毫秒,3880-2000=1880毫秒。

详解右侧动态面板在转动半圆中的结构:

分解后的动态图:

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:匀速  匀速词条  环形  环形词条  何用  何用词条  进度  进度词条  制作  制作词条  
原型

 Axure RP 9 教程:9宫...

本篇文章通过原型设计工具为大家演示了9宫格拼图效果,看完后别忘了自己动手做一下!效果图使用工具Axure RP 9 beta 绘制原型Camtasia 2018...(展开)

原型

 Axure RP 9教程:制作漂...

作者给大家分享了如何使用Axure rp9制作bootstrap 4进度条,一起来看看~今天跟大家分享的是制作漂亮的bootstrap 4进度条,老规矩能动手的...(展开)

原型

 用Axure模拟一个数字抽奖的小...

Axure作为原型工具,功能齐全而且简单易用。我作为刚刚毕业的小白,简单学了几个功能后,今天为大家展示一个用Axure模拟数字抽奖的游戏。数字抽奖的规则是每点击...(展开)