Axure 环形进度条

简介: Axure 环形进度条

步骤一:拖拉摆放好相关控件

1、4个半圆环,一个白色上半圆环 (上白),一个白色下半圆环 (下白),一个灰色上半圆环 (上灰),一个灰色下半圆环 (下灰),排放层次为: 下灰<下白<上灰<上白 (小技巧:无底边矩形与圆形进行去除操作可得半环形)

2、上面盖两个圆形,大的为透明底黑框,小的为白底黑框;

3、中间一个文本标签,文字为“100%”,设置为上下左右居中,命名为“进度”

画一个矩形 W:160、H:80

画一个圆型 W:140、H:140

选中两形状 => 去除

复制三份,分别命名为 上白、上灰、下白、下灰(旋转 180度)

注意排放顺序:上白、上灰、下白、下灰

上面盖两个圆形,大的为透明底黑框 160106,小的为白底黑框 140140

文字为“100%”,设置为上下左右居中,命名为“进度”

步骤二:为页面添加页面载入时用例

1、触发“进度”的显示时用例;

2、相对顺时针旋转“上灰”180度,错点为底部,动画为线性,时间为3600毫秒:

3、等待3600毫秒:

4、将“下灰”至于顶层

5、相对顺时针旋转“下灰”180度,锚点为底部,动画为线性,时间为3600毫秒

此时,外环已经有进度条的效果了

步骤三:为“进度”添加显示时用例

1、设置“进度”的文字为ceil ( (“上灰”的角度+“下灰”的角度-180) /3.6);

2、等待0毫秒;

3、隐藏“进度”

4、显示“进度”

目录
相关文章
|
开发工具 数据安全/隐私保护 Docker
docker下安装clickhouse
docker下安装clickhouse
563 0
|
9月前
|
存储 分布式计算 Hadoop
【产品升级】Dataphin V4.4重磅发布:开发运维提效、指标全生命周期管理、智能元数据生成再升级
Dataphin V4.4版本引入了多项核心升级,包括级联发布、元数据采集扩展、数据源指标上架、自定义属性管理等功能,大幅提升数据处理与资产管理效率。此外,还支持Hadoop集群管理、跨Schema数据读取、实时集成目标端支持Hudi及MaxCompute delta等技术,进一步优化用户体验。
815 3
【产品升级】Dataphin V4.4重磅发布:开发运维提效、指标全生命周期管理、智能元数据生成再升级
|
12月前
name属性和autocomplete属性
name属性和autocomplete属性。
206 7
|
10月前
|
Java 数据库连接 mybatis
Mybatis使用注解方式实现批量更新、批量新增
Mybatis使用注解方式实现批量更新、批量新增
784 1
|
11月前
|
小程序 UED
axure rp原型设计基础
Axure RP原型设计基础‌
259 4
|
Kubernetes Java Shell
Kubernetes(K8S) Deployment 升级和回滚
Kubernetes(K8S) Deployment 升级和回滚
286 0
|
Kubernetes Cloud Native Java
阿里云 MSE + ZadigX ,无门槛实现云原生全链路灰度发布
阿里云 MSE + ZadigX ,无门槛实现云原生全链路灰度发布
703 70
|
数据挖掘 大数据 关系型数据库
Doris和Greenplum数据库简单对比
【5月更文挑战第3天】Doris和Greenplum数据库简单对比
1951 0
|
JavaScript
Vue Steps步骤组件用法
Vue Steps步骤组件用法
336 0
|
缓存 JavaScript API
bladex实现单点登录
bladex实现单点登录