微信抽奖小程序制作代码（微信抽奖小程序制作代码是什么）



先上效果图：

利用到的组件和API：

1.canvas画布

2.动画

上数据：

hidden ： 中奖展示，转盘转弯后显示中奖奖品

disabled ： 点击指针按钮后，在转盘动画没执行完前设置为true，不可继续点击

i ： 第几次抽奖，微信小程序的动画有个bug，通过 step() 分隔动画，只有第一步动画能生效，这个值就是为了解决这个bug的。

prize ： 暂存获得的奖品

prizes ： 展示获奖奖品

wxml代码：

js部分：

转盘要转，就得转一个度数，那么首先定义个获取旋转角度的函数

微信小程序开发文档中说rotate的deg的范围-180~180，不过度数超出范围，是会一直转过去的，所以这里给的范围是[0,360]

然后开始撸个动画，这个动画在点击指针按钮的时候触发

触发点击事件就创建一个动画实例animation,设置好参数，这里设置的动画持续时间(2000)要与下面的展品延迟显示的延迟时间(2000)相等，这样就可以达到转盘转弯，展品立马显示。

.export()会把动画数据传递给转盘的animation属性。

旋转采用animation的totate(deg)方法，从原点触发旋转deg度。

degree是随机获取到的旋转角度，加上一个圆的度数的整数倍3600，就可以实现多转几圈，不至于点击指针转盘，转了不到一圈就停下来了。

判断获取到的奖品：

根据转盘被几等分，设置好条件进行判断

展示奖品：

展示奖品，肯定是在转盘转完之后才会展示，转盘旋转动画持续时间是两秒，那么奖品展示就得延迟两秒执行，可以用setTimeout()。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/hd-wfwjg/58435.html