网上有很多关于抽奖转盘的代码和实例，有使用JavaScript控制动画的，有使用Canvas实现的，它们思路各不相同，本文将介绍一种采用CSS3的方式来实现转盘动画效果，非常简单，只需几行代码即可实现。

效果演示

demo地址

核心思路

采用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看下具体的效果。

项目完整代码Github，有用的给个Star！

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[HTML5抽奖转盘-CSS3超简单版本]http://www.zyiz.net/tech/detail-134420.html