深圳公司网站建设,seo网站推广报价,wordpress每段不同图片,洛阳青峰网络让人去培训转盘抽奖是营销活动中很常用的一种方式#xff0c;在线上我们也可以经常看到转盘抽奖的活动#xff0c;所以今天作者就教大家在Axure中怎么制作一个转盘抽奖的原型模板。一、效果展示1、可以随机转动轮盘#xff0c;轮盘停止时#xff0c;指针对着的奖品高亮显示2、可以重复…转盘抽奖是营销活动中很常用的一种方式在线上我们也可以经常看到转盘抽奖的活动所以今天作者就教大家在Axure中怎么制作一个转盘抽奖的原型模板。一、效果展示1、可以随机转动轮盘轮盘停止时指针对着的奖品高亮显示2、可以重复多次开始抽奖每次抽中的奖品都是随机的【原型预览及下载地址】https://axhub.im/ax9/3058f587d5ebed55/#g1p转盘抽奖二、制作教程1、材料准备我们制作这个轮盘我们主要用到文字元件、图片元件、圆形元件、扇形元件、指针形状1、1外圈的制作外圈其实就是一个大的圆形和多个小的圆形组成具体摆放可以参考下图1、2奖品区域的制作奖品区域我们主要用扇形来制作根据奖品的数量例如案例中奖品是10个那就用360°/1036°得出一个扇形的角度为36°。然后我们用多个扇形通过旋转拼在一起就可以一个圆。所有的伞形我们要增加一个选中的填充颜色这样我们才知道最后是抽中了那个奖品。我们设置每个扇形的颜色可以用多个建设间隔开然后摆上奖品的文字和图片每个奖品的文字和图片根据扇形的文字设置对应角度的旋转。最后我们也可以增加一个圆环圆环设置为透明的浅蓝色这样文字那里的颜色就会和其他区域有所不同更加的美观。1、3指针的的制作指针其实就是多个圆形和针行组合在一起最外卖是灰色透明的原然后是一个红色的圆再将针行放在圆的上方然后用一个小圆增加内部阴影放在上方最后加一个小圆添加开始的文字添加外部阴影这样整个指针就有立体的效果了。我们把最好的部分组合放在一起完成整个轮盘外观的制作。2、交互制作鼠标单击开始按钮时我们首先要随机获取一个旋转的交互这里我们用random函数就可以获取一个0-1之间的数我们将它乘以360°就可以获得一个0到360度里的随机数。这样在最后圈时我们就根据这个随机数控制轮盘旋转多少度。我们增加一个默认隐藏的文本记录这个随机角度。然后我们还要增加一个默认隐藏的文本的文本记录旋转的圈数一开始默认要转几圈的动画就转几圈就可以了例如默认要转3圈就设置1080.所以点击开始按钮后到最后停止的到达角度就是随机角度默认设置的记录圈数我们用旋转事件将他旋转到这两个之和的位置即可旋转的交互我们要增加动画以及动画的时间时间越短转速越快这个你们可以根据需要设置。旋转动画可以选择缓进缓出开始转和最后结束的时候比较慢这种效果比较符合实际。旋转之后我们要加一个等待时间等待旋转结束一般旋转动画时间是多少等待时间就多少但是考虑到不同的电脑会有适当的延时具体等待时间可以轻微调整。等待时间结束之后我们要让选中奖品对应的扇形高亮变色这里我们需要判断是哪个扇形区域的奖品被选中呢这个我们根据记录的随机函数可以判断如果随机角度是0-36°因为一个扇形是36°就是第一个扇形变色我们用选中的交互将他选中即可因为前面我们设置了选中样式选中了填充颜色就会变化那一次类推如果随机是36-72之间就选中第二个72-108之间就是第三个……这是转一次的交互我们接下来要考虑转多次的交互如果之前已经转过一次点击开始按钮的时候我们就要先让扇形变回原来的颜色那我们用取消选中的交互就可以我们把10所有扇形都取消选中这样就可以全部变回默认颜色第一次完成旋转后第二次要达到的角度就不是1080随机角度了因为第一次完成之后所在的角度就是1080随机角度所以第二次我们应该旋转到达的角度就是两个1080随机角度其实就是每次转完介绍都要加多一个固定转的角度1080。我们用设置文本的交互将记录的圈数在加一次默认的圈数这样就基本完成了不过还要考虑在转的期间会不会有人多次点击开始按钮所以我们在开始的时候增加一个禁用按钮的交互在结束的时候用启用的交互防止这种情况的发生。这样我们就完成了转盘抽奖原型模板的制作了。以后使用基本上就是复制粘贴然后替换一下奖品图片和文字就可以直接使用了是不是很方便呢那以上就是本期教程的全部内容感兴趣的同学们可以动手试试哦感谢您的阅读我们下期见。本文由微信公众号Axure高保真原型 授权发布未经许可禁止转载
