Axure制作记录颜值的小游戏

Axure制作记录颜值的小游戏

最近网上有一个特效,玩抖音或者喜欢拍照的小伙伴肯定见过,那就是可以给你的颜值打分的一个效果,挺有意思的,今天给大家分享一下使用Axure实现这种效果。自由拖动进度条,记录当前进度条的百分比顺便记录下你的颜值。

Axure最终实现效果

实现逻辑

this.right函数:当前元件最右侧的横坐标

LVAR.toFixed(decimalPoints)函数:用于选取保留几位小数,LVER为所选值,decimalPoints数字,例如 5.toFixed(2)是指5.00 。

100除以进度条的长度就等于每拖动进度条单位长度时对应的百分比数值。

交互步骤

第一步:准备素材:需要一个进度条框,一个用户控制显示范围的动态面板,一个进度条,一个用户拖动进度条的动态面板,和一个显示百分比的显示框。如图所示:

Axure准备素材

第二步:进度条长度为475,将进度条转换为动态面板,动态面板取名为进度条,放置在横坐标为-450的位置。

将进度条范围框放置在横坐标为0的位置。

创建动态面板“进度条范围”,将进度条动态面板和进度条显示框都放在动态面板内。(这里注意,需要将进度条范围动态面板取消勾选自适应内容)

将百分比显示框放在合适的位置,隐藏边框线。

ok,准备工作基本完成。

第三步:下一步,是设置交互,本案例交互非常短。

选中进度条动态面板:

拖动时

设置移动

进度条水平移动

边界Right≤425,Left≥-450

设置文本

百分比显示框为[[((This.right-25)/4).toFixed(0)]] %

文本框的函数:意思是将进度条框长度为425,进度条初始位置占去了25,剩下的距离为进度条可移动距离为400,进度条每移动一个单位,那么对应的百分比就是0.25,即1/4,因此(This.right-25)/4就等于进度条当前位置占全部距离的百分比,再利用取小数点后0位,就可以得到当前进度条位置的整数百分比。

以上内容就是实现Axure制作记录颜值的小游戏的操作步骤,更多感兴趣的教程,点击文章:Axure中怎么画斜线和波浪曲线

在线客服
客服邮箱
客服电话
17051276424