Axure9制作会动的进度条

2023-09-1115:58:29原型设计Comments2,200 views字数 575阅读模式

演示一下如何制作一个会动的进度条,进度条上的百分比也能随之同步变化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

先看一下最终效果吧~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

Axure9制作会动的进度条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

首先我们需要三个元件,分别为“底框”“进度条”和“展示文字”;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

Axure9制作会动的进度条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

我们将“底框”的长宽设置为“300”“3”,颜色设置为灰色,线段为“0”;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

Axure9制作会动的进度条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

我们将“进度条”的长宽设置为“1”“3”,颜色设置为蓝色,线段为“0”;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

Axure9制作会动的进度条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

现在我们在“进度条”上增加交互:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

尺寸改变时→启用情形→选择[[This.width]]<[[b.width]](注意,这里需要先添加局部变量,将“底框”元件设置为b),具体操作如下图;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

Axure9制作会动的进度条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

添加动作→等待:设置为50ms(当前进度条增长速度,可以按照需求设置);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

Axure9制作会动的进度条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

添加动作→设置尺寸→选择【当前元件】→宽设置为[[This.width+1]](宽度每次增加1),高为当前高度为3,锚点设置为左侧,具体操作如下图;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

Axure9制作会动的进度条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

添加动作→设置文本→选择【展示文字】元件,设置值为[[(This.width/b.width*100).toFixed(0)]]%(这样文字显示进度就会和进度条保持一致啦),因为这里也使用了局部变量b,所以不要忘记增加局部变量哦~具体操作如下图;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

Axure9制作会动的进度条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

Axure9制作会动的进度条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

新建交互→载入时→设置尺寸:宽设置为[[This.width+1]](宽度每次增加1),高为当前高度为3,具体操作如下图;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

Axure9制作会动的进度条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

到这就完成我们的所有操作啦~预览就可以看到想要的效果啦!大家快试一试吧~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

来源:六元文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/56144.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定