circle-lottery

1.0.2 • Public • Published

转盘抽奖逻辑

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

特点

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

使用

演示效果:
xx
演示地址: 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. 奖项设置
    如果是转盘转动,奖项的设置索引顺序逆时针设置,如下:



    如果是指针转动,奖项索引顺序顺时针设置。

Readme

Keywords

Package Sidebar

Install

npm i circle-lottery

Weekly Downloads

0

Version

1.0.2

License

ISC

Unpacked Size

9.7 kB

Total Files

3

Last publish

Collaborators

  • xiangwenhu