HTML5抽奖转盘-CSS3超简单版本
网上有很多关于抽奖转盘的代码和实例,有使用JavaScript控制动画的,有使用Canvas实现的,它们思路各不相同,本文将介绍一种采用CSS3的方式来实现转盘动画效果,非常简单,只需几行代码即可实现。
核心思路
采用CSS3的transition(过渡效果),给定需要旋转的元素设置transform的rotate属性的结束角度,同时添加transition-timing-function来控制旋转的速率包括起始速率和结束速率,代码如下(浏览器前缀可自行添加):
#pointer { transition: transform 6.5s; transition-timing-function: ease-in-out; }
这样,给定结束角度后,元素就会旋转,结束角度可以自由控制旋转的圈数,例如结束角度为angelEnd,即圈数m=angelEnd/360
并取整,前几圈转满360无需特殊处理,关键是最后一圈的角度决定了抽奖的结果,代码如下:
let base = 2160; //先转满360×6圈let result = getRandom(-30,330); // 最后一圈角度,获取-30到330的随机数let angelEnd = -(base+result)// 结束角度数,负数代表逆时针旋转$("#pointer").css({"transform":"rotate("+angelEnd+"deg)"});// 设置CSS
判断抽奖结果
通过监听旋转元素的transitionend
获得动画结束的事件,在此回调中,可以判断抽奖结果,同时结合奖品数据及奖品的角度区间来计算,代码如下:
gifts = {"1":{ angleStart : -30, angleEnd : 30, tips : "恭喜您获得理财金2000元~~" },"2":{ angleStart : 31, angleEnd : 90, tips : "恭喜您获得理财金1000元~~" },"3":{ angleStart : 91, angleEnd : 150, tips : "很遗憾没有能中奖,再试一次吧~" },"4":{ angleStart : 151, angleEnd : 210, tips : "恭喜您抽中京东E卡一张~" },"5":{ angleStart : 211, angleEnd : 270, tips : "恭喜您获得理财金5200元~~" },"6":{ angleStart : 271, angleEnd : 330, tips : "很遗憾没有能中奖,再试一次吧~" }$("#pointer").on('transitionend',function(){ for (var key in gifts){ // 最后一圈的角度落在哪个奖品区间if (options.gifts[key].angleStart <= result && result<=options.gifts[key].angleEnd) { // 得到奖品的key值 alert(options.gifts[key].tips); } } })
设定指定奖品
每个抽奖程序都可能预留内部接口,转盘也不例外,通过设置最后一圈的角度数即可提前设置奖品结果,代码如下:
let _key = null; // 内定奖品id
if (_key) { result = getRandom(gifts[_key].angleStart,gifts[_key].angleEnd) }
到此为止,一个简单的转盘抽奖程序就完成了,根据上面的思路,不仅可以旋转指针,也可以旋转圆盘,各位可以体验一下demo看下具体的效果。
作者:青茶
免责声明:文章、笔记等仅供分享、探讨、参考等学习之用,因此造成的任何后果概不负责。(如有错误、疏忽等问题,欢迎指正、讨论,谢谢)
本文版权归作者和博客园共有,欢迎转载,但请务必在文章页面明显位置给出原文连接,谢谢配合。