如何用Axure制作匀速环形进度条? | 您所在的位置:网站首页 › tableau进度条制作 › 如何用Axure制作匀速环形进度条? |
在各类产品中,关于进度条的展现方式各异,而笔者选择了常见的匀速环形进度条,向我们展示了用Axure制作的要点与逻辑。 图中带有闪电标识表示有创建交互事件的元件: 文本框(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毫秒。 详解右侧动态面板在转动半圆中的结构: 分解后的动态图:
本文由 @东方夜明 原创发布于人人都是产品经理,未经作者许可,禁止转载。 题图来自Unsplash,基于CC0协议 |
CopyRight 2018-2019 实验室设备网 版权所有 |