Axure制作进度条

开发工具与关键技术:动态面板

1、首先创建一个空白页面,在工作区域拖入相关元件元素

Axure制作进度条_第1张图片

2、然后对第一个矩形进行设置,包括名称、样式等,这个是进度条的背景

Axure制作进度条_第2张图片

3、再对第二个矩形进行设置,包括样式等,这个是进度条

Axure制作进度条_第3张图片

4、然后将第二个矩形转换为动态页面,并对其进行命名

Axure制作进度条_第4张图片

Axure制作进度条_第5张图片

5、将两个矩形放置同一个位置

Axure制作进度条_第6张图片

6、下面开始对交互事件进行设置了,我们只需要在页面载入的时候加即可,首先是页面载入时让进度条的宽度为1,就是进度的百分之一感觉

Axure制作进度条_第7张图片

7、然后等待一段时间,再开始让进度条走动

Axure制作进度条_第8张图片

8、让进度条走动其实就是将矩形的宽度拉长,这里需要注意动画效果要选择为线性

Axure制作进度条_第9张图片

9、最后,f5预览一下效果,进度条会缓慢的加载中,如果觉得过快或过慢的话,回到交互事件中,将时间加长或缩短就可以了。

Axure制作进度条_第10张图片Axure制作进度条_第11张图片

这是我所学到的Axure制作进度条,希望可以帮助到你们。

以上就是我的分享,新手上道,请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔!

你可能感兴趣的:(Axure,html)