热点专题

您所在位置:首页 > 热点专题 > 正文

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

文章作者:www.blch.net.cn发布时间:2020-03-23浏览次数:857

如何用Axure制作统一的圆形进度条?

在各种产品中,进度条以不同的方式显示。作者选择了通用的统一圆形进度条来展示Axure的要点和逻辑。

01最终效果

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

百分比值跟随变化

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

02注意事项

轴9在本教程中用作教程描述工具(轴8适用)

本教程针对轴,基本操作在此不再重复

03生产困难

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

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

04组件准备

图中的闪电标记表示存在创建交互事件的组件:

05交互逻辑思想1。 组件加载(组件2)将文本框(组件5)文本设置为0

描述A:文本框(元素5)的默认文本不是0,当它设置为0时,文本框(元素5)的文本将被更改。

描述B:当文本框(元素5)的文本改变时,百分比文本标签(元素6)的百分比值以恒定的速度增加,圆形(圆形)进度条以恒定的速度增加。

2。如何实现百分比文本标签百分比值的不断增加(组件6)?如果全局变量的值小于97,则

文本框(元素5)将执行等待时间设置为37毫秒。

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

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

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

解释甲:37毫秒是如何等待37毫秒到来的?

设计环(圆形)进度条如果从增长到环的时?涫?4000毫秒,对应的百分比值是100%,则百分比值增加1%,所用的时间是4000/100=40毫秒。

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

解释乙:实现百分比增长的原则是什么?

当文本框(元素5)的文本改变时,设置全局变量加1,然后将新的全局变量设置到文本框(元素5),从而导致文本框(元素5)的文本改变,从而再次执行该事件,形成循环事件。

3。如何实现循环进度条的自我成长?

紧接着步骤1,组件加载(组件2)将文本框(组件5)的文本设置为0;

将右半圆旋转180度,匀速旋转2000毫秒;

等待2000毫秒将左半圆旋转169.2度,需要1880毫秒。

解释甲:为什么要花1880毫秒才能把左半圆旋转169.2度?

最终效果需要在97%时停止自我增长,而这个百分比已经相当于循环进度条的97%。

360度对应于圆的100%,圆的97%对应于349.2度,右半圆完成了180度,左半圆是349.2-180=169.2度。

4000毫秒对应100%的环,97%的环对应3880毫秒。右半圆需要2000毫秒才能完成,3880-2000=1880毫秒。

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

分解动态图:

本文最初由

东方叶明出版。每个人都是产品经理。未经作者许可,禁止复制。

主题图来自Unsplash。基于CC0协议返回搜狐查看更多“负责任的编辑”: