Axure高保真教程:橡皮擦的擦除效果——刮奖原型

橡皮擦的擦除效果是系统常见的效果,在可以画图编辑的系统中或者是在抽奖刮奖的系统中非常常见。所以今天和大家分享在Axure中如何制作橡皮刷的效果,我们会议刮奖原型为案例,教大家制作出一个刮奖效果的高保真原型模板。

一、效果展示

1、鼠标移入对应区域,拖动鼠标可以刮开上层,查看中奖信息;

2、刮奖区域和中间图案是随机抽取生成的,所以每次中间图案和刮去图案金额都是随机的;

3、能根据随机的中奖图案和刮出的随机图片自动计算出中奖金额。

产品经理,产品经理网站

原型地址:https://toqk0p.axshare.com

二、制作教程

这个原型模板主要分成4个区域,刮奖区、中奖图案和中奖金额和覆盖在上方的可刮区。

1. 中奖图案

放置一个动态面板,面板里增加多个状态,每个状态对应一张动物图片,案例中是7种动物,所以需要7个状态,每个状态用1~7的数字分别命名,因为在载入时,我们会通过随机数抽取一个1-7之间的数,这里我们用random函数就可以随机抽取一个0-1之间的随机数,然后我们乘以7,相当于获取一个0-7之间的随机数,最后用Math.ceil(x)函数向上取整就可以获取到0-7之间的随机整数。

我们用一个默认隐藏的文本记录这个整数,然后设置面板状态进入和这个随机数一样的状态页。

最后我们用添加行的交互,对刮奖区的中继器添加12行,每行同样用上述的方便设置一个0-7的随机整数到Column0中。

产品经理,产品经理网站

2. 中奖金额区

中奖金额很简单,就是一个元宝图标和文本标签组成。

产品经理,产品经理网站

3. 刮奖区

我们用中继器来制作,中继器内部放置一个动态面板,面板里增加多个状态,每个状态对应一张动物图片,案例中是7种动物,所以需要7个状态,每个状态命名,方便后续交互,案例中是用1~7的数字分别命名,后续会通过随机函数获取一个0-7的随机数,从而显示对应的图案。这里和上面中奖图案的动态面板是一致的。

另外还需要,下方增加一个金元宝图标和文本标签。

产品经理,产品经理网站

中继器表格里默认Column0列即可,因为中奖区是12个内容,上面在中奖图案载入的时候,就新增了12行,Column0列里的随机整数。所以在中继器每项加载时,我们用设置面板状态的交互,设置面板状态到和Column0的随机整数一致的页面,然后我们还要设置一个随机金额,同理我们用random函数获取一个随机金额,案例中是1-999元。

产品经理,产品经理网站

然后我们要设置中间金额的值了,中继器第一行加载的时候,中奖金额的文本是0,所以我们可以写条件,如果前面中间图片抽取的随机数字,和column0列随机抽取的数字一致,就代表抽中了,所以我们就把该行随机抽取的中间金额+他原来的值。例如第1行抽中100,中奖金额0+100=100,第二行没抽中,所以中奖金额是100,第三行抽中了205,中奖金额=205+100=305……

产品经理,产品经理网站

这样随机抽取图案,以及自动计算中奖金额就完成了,最后我们要做覆盖在上方的可刮区。

4.可刮区

底部我们用多个正方形矩形拼在一起,如下图所示:

产品经理,产品经理网站

案例中是10*10的矩形,大家可以根据需要修改,矩形越少效果越好,但是矩形太小就会导致矩形数量和交互增多,容易导致卡顿。

上方是我们的橡皮刷,我们用矩形制作即可。

最上面我们要放一层动态面板,因为只有动态面板有拖动的效果。

鼠标移入动态面板就显示橡皮刷,移出就隐藏。

产品经理,产品经理网站

然后做一个橡皮刷跟随鼠标移动的交互,我们可以用cursor函数获取鼠标的实时坐标,然后减去橡皮刷一般的高度或者宽度,就可以让橡皮刷的中心点跟随鼠标。

产品经理,产品经理网站

鼠标拖动时,我们先用移动的交互,让橡皮刷跟随鼠标拖动,然后在设置条件,如果橡皮刷碰到第一个正方形,我们就用隐藏的交互,设置第一个正方形隐藏,如果碰到第2个正方形,我们就用隐藏的交互,设置第2个正方形隐藏……一次类推直到最后一个。

产品经理,产品经理网站

我们完成一个后,可以复制多两个,分别放在三个区域上面即可。

5.其他元件

其他元件,其实就是美化的元件,包括背景、图标、分割线、文字等内容,大家可以根据自己需要添加。

这里还涉及再来一次的按钮,这个按钮点击后,其实我们需要将页面还原。一般人会用显示的操作显示所有矩形,然后用删除行删除刮奖区里所有的行,在触发中奖图片区载入的交互,这样相当于重新随机。但是我们可以不用这么麻烦,直接一个打开链接,选择刷新页面即可。

产品经理,产品经理网站

这样我们就制作完成了,下次使用时,我们只需要在动态面板里修改中奖图片,就可以直接使用了,如果用橡皮刷区域可以直接复制使用。

那以上就是本期教程的全部内容,感兴趣的同学们可以动手试试哦,感谢您的阅读,我们下期见。

本文作者 @AI产品人

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部