抽奖转盘

转盘抽奖场景

开始安装

$ npm install @winman-f2e/lottery-wheel

如何使用

import LotteryWheel from '@winman-f2e/lottery-wheel'

document.getElementById('root').innerHTML = `
  <div class="container">
    <div class="plate"></div>
    <div class="indicator"></div>
  </div>
`

const prizes = [
  {
    id: 'vip_2',
    name: '2天VIP'
  },
  {
    id: 'coin_2000',
    name: '2000金币'
  },
  {
    id: 'vip_7',
    name: '7天VIP'
  },
  {
    id: 'cash_888',
    name: '888元现金红包'
  },
  {
    id: 'vip_30',
    name: '30天VIP'
  },
  {
    id: 'coupon_66',
    name: '66钻石券'
  }
]

// 转盘转动
const lotteryWheel = new LotteryWheel({
  el: '.plate',
  initDeg: -30,
  prizes
})

// 指针转动
// const lotteryWheel = new LotteryWheel({
//   el: '.indicator',
//   prizes: [prizes[0]].concat(prizes.slice(1).reverse())
// })

document.querySelector('.indicator').addEventListener('click', () => {
  // 伪装转动，等待抽奖结果
  lotteryWheel.mock()

  // 模拟异步请求，获取抽奖结果
  setTimeout(() => {
    let index = Math.floor(Math.random() * 6)
    lotteryWheel.success(prizes[index].id, prize => {
      console.info(prize)
    })
    // lotteryWheel.fail()
  }, 2000)
}, false)

API

LotteryWheel

const lotteryWheel = new LotteryWheel({
  el: '.plate', // 转动的dom节点，dom或字符串
  prizes: [{ id: 'test', name: 'xxx' }], // 奖品列表，要有id，以便查找对应的奖品
  initDeg: 0, // 初始化时的旋转角度
  offsetDeg: 0, // 旋转到结果时需要偏移的角度
  mockSpeed: 5, // 模拟转动的速度，越大越快
  turnNumber: 5, // 获得抽奖结果后，执行旋转动画的圈数
  timingFunction: 'cubic-bezier(0.38, 0.26, 0.25, 1)', // 旋转动画曲线，若需修改，注意尽量和模拟速度保持流畅的衔接，避免出现停顿
  duration: 5000 // 动画过渡时间，单位ms
})

实例方法

• mock：模拟转动
• success：获得抽奖结果时执行，参数：
  • prizeId：用于从prizes的id中寻找对应的奖品
  • callback：动画结束后的回调，参数为prize（奖品列表的一项）
• fail：抽奖失败时调用，转盘会重置到初始状态

环境配置

构建工具

$ npm install -g fle-cli

# yarn
$ yarn global add fle-cli

命令说明

# 本地开发
fle dev

# 代码构建
fle build

查看更多说明： 构建文档