转盘抽奖逻辑
该库适用指针转动或者转盘转动的转盘抽奖。不负责UI。
特点
- 不依赖任何库
- 内置贝塞尔timing function
- 支持转盘本身有rotate角度
- 支持转盘每个奖项占用角度不相同
- 适用指针转动或者转盘转动
- 代码少
使用
演示效果:
演示地址: https://xiangwenhu.github.io/circle-lottery/
html
js
const PRIZE_COUNT = 9;let enabledDraw = true; const prizesEl = document; let lottery = prizesEl pits: PRIZE_COUNT; lottery { enabledDraw = true;}; document;
参数
- 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);">
- 奖项设置
如果是转盘转动,奖项的设置索引顺序逆时针设置,如下:
如果是指针转动,奖项索引顺序顺时针设置。