转盘抽奖逻辑

该库适用指针转动或者转盘转动的转盘抽奖。不负责UI。

特点

1. 不依赖任何库
2. 内置贝塞尔timing function
3. 支持转盘本身有rotate角度
4. 支持转盘每个奖项占用角度不相同
5. 适用指针转动或者转盘转动
6. 代码少

使用

演示效果：

演示地址： 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
  旋转时间

思路：

1. css3的transition与transform
2. js的transitionend事件
3. 角度累加

注意事项

1. 如果被旋转的元素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);">
2. 奖项设置
   如果是转盘转动，奖项的设置索引顺序逆时针设置，如下：
   如果是指针转动，奖项索引顺序顺时针设置。