1.0.2 • Published 5 years ago
circle-lottery v1.0.2
转盘抽奖逻辑
该库适用指针转动或者转盘转动的转盘抽奖。不负责UI。
特点
- 不依赖任何库
- 内置贝塞尔timing function
- 支持转盘本身有rotate角度
- 支持转盘每个奖项占用角度不相同
- 适用指针转动或者转盘转动
- 代码少
使用
演示效果:
演示地址: https://xiangwenhu.github.io/circle-lottery/
html
<div class="draw-container">
<img src="./images/prizes-3.jpg" class="draw-prizes" class="">
<img src="./images/btn-draw.png" class="draw-btn" alt="">
</div>
<script src="./index.js"></script>
<script src="./lottery.js"></script>
js
const PRIZE_COUNT = 9;
let enabledDraw = true;
const prizesEl = document.querySelector(".draw-prizes");
let lottery = new Lottery(prizesEl, {
pits: PRIZE_COUNT
});
lottery.onEnded = function(ins, index, prizeIndexes) {
enabledDraw = true;
};
document.querySelector(".draw-btn").addEventListener("click", function() {
if (!enabledDraw) {
return;
}
// 设置奖项
const indexes = [1];
lottery.setPrize(indexes);
lottery.start();
});
##参数
- beziers: Array
自定义贝塞尔 - minCycles: number
最小圈数 - maxCycles:number
最大圈数 - pits: number
奖品数 - timing: number
旋转时间
思路:
- css3的transition与transform
- js的transitionend事件
- 角度累加
注意事项
- 如果被旋转的元素transform有除了rotate其他设置选项,请直接写在内联style上面。
比如: 被旋转的指针还有translate设置。transform: translate(-50%, -50%) rotate(0);
应该如下编写, 而不该写到css文件或者style标签里面:<img src="./images/btn-draw.png" class="draw-btn" alt="" style="transform: translate(-50%, -50%) rotate(0);">
- 奖项设置
如果是转盘转动,奖项的设置索引顺序逆时针设置,如下:
如果是指针转动,奖项索引顺序顺时针设置。