【Axure教程】随机抽奖原型

简介: 【Axure教程】随机抽奖原型

随着商业的进步与发展,在to c的系统里面,抽奖可以说是必备的功能。

所以我们今天来学习,在Axure里面做一个最一个既美观,而且复用性又强的抽奖原型,完成后效果如下图所示:

b44cdb4f8f23d4a96d4e173c051789df.jpg

【原型预览】

用电脑点击左下方阅读原文或复制打开下面的原型预览地址

https://axhub.im/ax9/3058f587d5ebed55/#g=1&id=eonibt&p=%E9%9A%8F%E6%9C%BA%E6%8A%BD%E5%A5%96

【原型下载】

方式2:https://weidian.com/item.html?itemID=4407296937

【制作教程】

一、材料准备

1. 中继器

这次教程主要是通过中继器制作,因为中继器有很强的复用性,制作完成之后,只需要再中继器表格中维护奖品信息,既可以自动生成交互效果

布局:为水平分布,每行项目数为5;

中继器内部所需元件:

内部矩形:设置选中样式为蓝色(抽奖过程中闪烁效果),禁用样式的为橙色(抽完成后抽中的效果)。

图片元件:奖品的图片内容,后续通过设置图片的交互,将中继器里的图片设置到该元件里

文本标签:奖品的文字内容,后续通过设置文本的交互,将中继器里的奖品文字设置到该元件里

将内部矩形、图片元件和文本标签组合在一起,如下图所示放置在中继器内

02f786200fd1710ae3eed18df2c29dee.png

中继器内部表格设置

中继器表格内共需要设置5列,如效果所示

8e184d1fc4b67872baf297d3f5bf03a7.png

no列:序号列,为按12345……填写,后续随机抽取的时候会用到序号;

text列:文字列,对应的是文本标签的内容,这里填写奖品信息即可;

pic列:图片列,右键导入本地图片,或者填写图片的在线地址均可;

xuanzhong列:默认为空即可,只用于抽奖过程中的逻辑处理。

jinyong列:默认为空即可,只用于抽奖完成后奖品背景变色的逻辑处理。

2. 按钮

抽奖的按钮,按钮样式你们根据自身需求设计即可。

3. 文本标签

需要增加两个文本,只用于逻辑处理,默认隐藏

  • 次数文本:用于记录抽签是闪烁效果的次数
  • 记录文本:用于记录闪烁的位置,默认值为1

二、交互制作

1. 中继器每项加载时交互

首先我们要将中继器里关于奖品的信息(文字和图片)设置到对应的元件里

设置文本:将item.text的内容设置的中继器里的文本标签(奖品的文字内容)

设置图片:将item.pic的内容设置的中继器里的图片元件(奖品的图片)

1e21648e3e2887fbb77484ba81abf1e0.png

然后我们需要分情况来设置,如果xuanzhong的值为1:

设置选中:那么我们就需要选择背景矩形让他变色,我们是通过中继器的值来控制背景矩形的状态的,如果xuanzhong列的值为1,即选中变色,如果不等于1,就不会选中

设置文本:这里我们还需要设置记录文本,设置为item.no+1,item.no是当前的序号,加一代表我这个已经闪烁完成了,记录下一个要闪烁的奖品的no

83847991c7cf521642daf4b9e99104ac.png

接下来我们设置禁用的事件,和选中的事件差不多,如果jinyong的值为1,那么就禁用背景矩形,如果不是1的情况,我们可以不用写,因为本来默认就不是1的情况,当然了你也可以写上如果禁用不等于1,启用背景矩形,不过这里写不写都是一样的,没必要浪费时间。

c663119bef8b88f8f8576d0ea49f39b1.png

最后,我们还要做一个循环,需要考虑的是,如果是在最后一行,选中的时候设置记录文本为序号+1那肯定是错误的,最后一行的时候应该设置记录文本为1,这样才能循环闪烁。

如果tem.isLast为真,而且xuanzhong的值=1,我们就是设置记录文本的值为1

d4c335f2c8bb4f6c10ef41110687ca8a.png

那这样,中继器内的交互就完成了,接下来,我们制作抽奖循环的交互。

2. 次数文本载入时交互

次数文本是用来控制抽奖过程中闪烁的次数,因为抽奖的随机的,所以我们在元件载入时,设置次数文本为随机数。这里我们用到随机函数math.random,他可以从0到1中任意取一个数,然后我们希望控制闪烁的次数在20到40次之间所以我们用随机函数的结果*20+20,就可以控制了,最后记得需要用fixed函数来四舍五入

9081cadc24e62726992d212a89f97f46.png

3. 抽奖按钮鼠标单击时交互

这里是需要分两种情况,第一种是次数文本>0的情况:

鼠标单击按钮以后,我们要首先禁用掉当前按钮,为了防止重复点击而出现的问题

然后我们标记中继器里的所有行,然后更新已标记的行,即更新所有行,将所有行里面的xuanzhong列和jinyong列的值都改为0,这里可以理解成全部奖品的背景设置为默认颜色。

然后我们再更新行,更新的逻辑是no列的序号==记录文本,将这一行的xuanzhong列的值更新为1。这样我们就可以保证每次只会选中1个,而且选中这个之后又会自动设置记录文本+1,从而实现循环。

这里我们设置一个等待的时间,就是每个奖品选中显示蓝色背景的时间,案例中是0.1秒,大家可以根据实际来设置。

这样完成以后,我们设置次数文本为他原来的值-1,然后在触发当前按钮鼠标单击时事件。例如刚开始随机出来的数字是20,那么他就会一直不断的循环在转,20到19到18……到0,才会停止

425046a7b604aaf882d8a78290ddb3e1.png

当次数文本变成0的时候,我们进入下一中情况:

首先我们也是通过标记所以行,更新所有行,将所有行里面的xuanzhong列和jinyong列的值都改为0,这一步和前面的都是一样的。

然后我们再更新行,更新的逻辑是no列的序号==记录文本,这里注意,这次更新是将这一行的jinyong列的值更新为1。这样就会有一个变成橙色,就是抽中的键盘了。

按道理来说这样就完成了整个抽奖的流程,后面我们就要为下一次抽奖准备

因为开始抽奖的时候禁用了按钮,所以这里我们要重新启用抽奖按钮。

然后我们重新随机抽取闪烁的次数,因为之前是次数文本在载入时通过随机函数来设置的,所以这个我们直接触发随机文本触发时事件即可。

fd19994fca7d38ccd5ccec67aa890f98.png

样,我们就完成了随机抽奖的原型模板了,以后使用的话,我们可以直接在中继器表格中维护奖品信息,就能自动生成交互,是不是很方便快捷呢?

那以上就是本期的全部内容了,感谢您的阅读,我们下期见,88~~~

作者:梓贤vigo;


微信公众号:Axure高保真原型,分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容


本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载

相关文章
|
4月前
|
存储 数据管理 数据库
Axure中继器入门:打造你的动态原型
Axure中继器入门:打造你的动态原型
59 0
|
JSON JavaScript 前端开发
Axure函数与属性速查
Axure函数与属性速查
Axure快速入门(06) -动态面板例子
Axure快速入门(06) -动态面板例子
66 0
|
架构师 数据可视化 人机交互
Axure介绍与原型案例分享
Axure介绍与原型案例分享
|
自然语言处理 JavaScript 前端开发
蓝桥杯 —— Web前端(功能实现类)【标题即题目链接,点击查看具体要求】
蓝桥杯 —— Web前端(功能实现类)【标题即题目链接,点击查看具体要求】
140 0
|
前端开发 JavaScript API
✨✨做一个伪3D效果的卡片列表来复习一下CSS动画吧~
✨✨做一个伪3D效果的卡片列表来复习一下CSS动画吧~
353 0