JS-VUE-Big Wheel Draw

Vue.js
JS-VUE-Big Wheel Draw

предисловие

«Управление тремя сокровищами» (девять квадратов, большие вертушки, игровые автоматы, конечно, три сокровища, конечно,最基础метод маркетинговой операции), в этой статье говорится о большом проигрывателе, логика реализации проигрывателя должна быть относительно простым маркетинговым планом;

То, что было написано до сих пор, - это игровой автомат и большой проигрыватель, а маркетинговые планы, такие как Jiugongge, будут дополнены в будущем, просто для записи;

Другие варианты

Розыгрыш игрового автомата JS-VUE >>>

JS-VUE- Jiugongge Lucky Draw >>>

UI

  • Старомодно, сначала посмотрите на статический пользовательский интерфейс, чтобы у вас была концепция изображения.

e02a154ac67cba2a7293547f08ae484.png

анализ случая

Справочный график начального эталонного значения

740e35d89ab3d59d4ef7f256cf19299.png

Анализ схемы — конфигурация параметров

  • Основная идея:

Буду指针а также中奖Область разделена на две части.В настоящее время обычный эффект состоит в том, чтобы управлять вращением выигрышной области, а затем останавливаться на указателе.Конечно, вы также можете управлять указателем.Набор идей и структура дома относительно простой Единственная сложная точка - выигрышная область.但是如果你足够懒，像我一样, вы можете передать картинку или полностью полагаться на удаленные данные;

  • О положении вращения

Каждая движущаяся позиция должна быть разделена поровну, 360/число === позиция, занимаемая каждым призом, взяв за пример эту статью, есть 8 призовых позиций, каждая область должна быть 45 градусов, а центральное положение каждого указателя должно быть ± 22,5 градуса (значение ± зависит от того, движетесь ли вы по часовой или против часовой стрелки)具体值看下面 实现逻辑 区域

  • конфигурация параметров

    • data дает компоненту некоторые системные параметры, количество вращений, эффекты и т.д.
    • Расчетный угол поворота атрибута rotateStyle, корректировка в реальном времени
    • Реквизиты предоставляют параметры внутреннего интерфейса компонента и некоторые основные данные, такие как изображение проигрывателя и т. д.
// 基础参数
data () {
   return {
     isrun: false,
     rotateAngle: 0, // 旋转角度
     config: {
       duration: 4000, // 总旋转时间 ms级
       circle: 8, // 旋转圈数
       mode: 'ease-in-out' // 由快到慢 惯性效果都省了
     },
     cricleAdd: 1, // 第几次抽奖
     drawIndex: 0 // 中奖索引 转盘图片排序 指针右手开始 0-...
   }
 }
 // 计算属性
 computed: {
   rotateStyle () {
     const _c = this.config
     return `
       -webkit-transition: transform ${_c.duration}ms ${_c.mode};
       transition: transform ${_c.duration}ms ${_c.mode};
       -webkit-transform: rotate(${this.rotateAngle}deg);
           transform: rotate(${this.rotateAngle}deg);`
   }
 }
 // 入参
 props: {
   httpData: {}, // 接口调用所需参数
   stateData: {
     type: Object,
     default: () => {
       return {
         coin: 0, // 超级币数量
         prize_img: '' // 转盘图片
       }
     }
   }
 }

реализовать логику

  • Нам нужно сделать очень просто, рассчитать положение выигрышного приза и вывести его.

  • Положение соответствует количеству витков,drawIndexВ соответствии с положением приза этот параметр был упомянут

    this.rotateAngle = this.config.circle * 360 * this.cricleAdd - (22.5 + this.drawIndex * 45)
// 圈数位置解析
// this.config.circle * 360 * this.cricleAdd 顺时针总圈数/累积总圈数
// 22.5 + this.drawIndex * 45 ===> (奖品位置 === this.drawIndex * 45) (指针中间位置 === 22.5)

  • drawIndex, просто бери прямо с сервера, если у тебя не кончилась позиция, можешь сам посчитать

  • Для облегчения расширения выбрасываются два состояния, соответствующие началу лотереи, start и fin.

    this.$emit('draw_fin', 'start')
this.$emit('draw_fin', 'fin')

  • полный код,css就不水字数了，下面附上源码地址

      methods: {
      async run () {
        if (this.stateData.coin < 10) {
          console.log('超级币不足')
          return
        }   
        if (this.isrun) return
        // const data = await this.goDraw()
        // 可以作为弹窗等信息展示
        this.$emit('draw_fin', 'start')
        this.$set(this.stateData, 'coin', 0) // 更新数据，此处仅为示例，推荐使用 draw_fin方法的 start/fin 进行相应数据更新
        this.isrun = true
        this.rotateAngle = this.config.circle * 360 * this.cricleAdd - (22.5 + this.drawIndex * 45)
        // 圈数位置解析
        // this.config.circle * 360 * this.cricleAdd 顺时针总圈数/累积总圈数
        // 22.5 + this.drawIndex * 45 ===> (奖品位置 === this.drawIndex * 45) (指针中间位置 === 22.5)

    this.cricleAdd++
    setTimeout(() => {
      this.$emit('draw_fin', 'fin')
      this.isrun = false
    }, this.config.duration)
  },
  goDraw () {
    // 请求接口拿到中奖商品
    // 加下自己项目的样式 loading 用户体验
    return new Promise(async (resolve, reject) => {
      // await 奖品接口
      resolve({
        msg: '抽奖明细'
      })
    })
  }

    }

Использование компонентов

  • использовать
import dialWrap from '../../components/dial/dial.vue'
<dialWrap ref="dialWrap" :stateData="stateData"></dialWrap>

эффект лотереи

GIF 2021-5-8 9-43-42.gif

Эпилог

Вышеизложенное является приблизительной идеей реализации, эффект относительно прост; для некоторых деталей и расширений вы можете играть сами ~

К этой статье прилагается-Адрес источника, добро пожаловать на обсуждение~

Категории