Axure怎么设计点赞的百分比进度条?

在投票类的网页中,点击“支持”按键后,不仅增加“被支持”一方的“投票”数量,还显示“投票”比例,该怎么制作这类的网页呢?具体效果图如下,详细操作请看下文详细介绍。

软件名称:
Axure RP v8.1.0.3382 Enterprise 中文特别版(附注册机+汉化包+安装教程)
软件大小:
83.2MB
更新时间:
2019-04-26

Axure怎么设计点赞的百分比进度条?_第1张图片

“进度条”的基本制作原理,可先参考以下链接,是个基础,这里不再累述部分代码原理~

在axure中,按以下图示,设置组件布局:

Axure怎么设计点赞的百分比进度条?_第2张图片

Axure怎么设计点赞的百分比进度条?_第3张图片

Axure怎么设计点赞的百分比进度条?_第4张图片

先设置”按键1“的交互动作:

Axure怎么设计点赞的百分比进度条?_第5张图片

动作1:

设置”参数1“的数值,即点击“支持”后,数值加1

Axure怎么设计点赞的百分比进度条?_第6张图片

设置"参数1"的“元件文字”为局部变量LVAR1

所以”参数1“的数值为:[[LVAR1+1]]

Axure怎么设计点赞的百分比进度条?_第7张图片

动作2:

1.触发"颜色进度条1"的"载入时"动作

2.触发"颜色进度条2"的"载入时"动作

Axure怎么设计点赞的百分比进度条?_第8张图片

然后看下“颜色进度条1”的“载入时”的交互动作:

Axure怎么设计点赞的百分比进度条?_第9张图片

动作1:

设置”总量1“的内容,即“进度条1”的比率数值,这是一个临时的过渡数值

Axure怎么设计点赞的百分比进度条?_第10张图片

设置"参数1"的“元件文字”为局部变量LVAR1

设置"参数2"的“元件文字”为局部变量LVAR2

上一页 1 2 下一页 阅读全文

你可能感兴趣的:(Axure怎么设计点赞的百分比进度条?)